Favicon

What is a favicon?

Have you ever noticed the small image that appears in your browser's address bar next to the address of a Web site? That is the favicon. It's an image that gives your site an opportunity to be remembered with one stunning piece of artwork.

An example favicon

Favicons must be one of two sizes: 16 by 16 pixels OR 32 by 32 pixels. The 32 size will typically be reduced to 16 automatically by the browser.

Some browsers require the favicon image type to be .ico, but you can also choose png or gif. IE is one of those that require .ico, and that makes it important to choose .ico as your favicon file type. SO, When you create your own favicon, save it in PNG format and then visit ConvertIco.com to convert it to a .ico file.

And very unfortunately, it still won't show up in IE for us--IE only displays a favicon if the page came from a Web server. Since we are working with files on the local machine, we won't see our favicons. Boo.

I will still be looking for the code and files in your projects below. I will be checking them in Firefox to see if they work, but I won't be taking away any credit as long as you try the steps below.

Putting a Favicon on Your Template

  1. Save the example favicon above into the same folder as your template.
  2. Open your template.
  3. Inside the head section of the page, copy the code: <link rel="shortcut icon" href="example_favicon.ico" />
  4. Save!

Putting a Favicon on Your Journal

  1. Design a favicon image for your journal using Photoshop or another editor.
  2. Remember to use one of the correct image sizes!
  3. Save this favicon image as fav.png and make sure it is in your journal folder.
  4. Go to ConvertIco.com and upload fav.png to be converted.
  5. Download the converted .ico file. Make sure it is in your journal folder and named "fav.ico"
  6. Open the index page of your journal, as well as any other journal pages where you want the favicon to appear.
  7. Inside the head section of each page, copy the code: <link rel="shortcut icon" href="fav.ico" />
  8. Save!