What are favicons?

Favicons (pronounced “fav-eye-cons”), short for “favorites icon”, are 16 x 16 pixel icons that are displayed by your web browser. Favicons are typically displayed in the address bar of the web browser, on the left of the web page’s URL. An example of a favicon in the browser’s address bar:

Note that the web browser, Internet Explorer, only displays favicons in the address bar when the web site is already bookmarked. All other browsers, Firefox, Opera and Safari, will display the favicon of a web site in the address bar regardless of whether the web site has been bookmarked or not.

Favicons are also used by web browsers when a web pages is bookmarked. The favicon appears next to the bookmark in the bookmark list. An example of favicon display in bookmarks:

Why use a favicon?

Using a favicon is a great way to brand or personalize a web site with a logo. It helps remind visitors which web site they’re viewing, and possibly help them find their way when using tabbed browsing in some browsers.

Favicons also add a certain professionalism to a web site. You probably won’t see a favicon on “Ma and Pa’s Personal Home Page”, but you’ll see one on a business web site such as Zann Marketing.

Making a favicon

I’ve read several tutorials on how to make a favicon. They’re usually very involved, some-what confusing, and requires icon making software. There are also some business that offer favicon making, but these are usually at an exorbitant cost.

There’s a much simpler and process of making favicons. It involves the use of Adobe’s Photoshop, and a Photoshop plugin from Telegraphics called, ICO (Windows Icon) Format. This plugin allows you to save your 16 x 16 pixel Photoshop image as a ICO file. This plugin can also be used with Paint Shop Pro and best of all, it’s free (Telegraphics only asks for a $5 donation).

Steps to take:

1. Download and install the ICO (Windows Icon) Format plugin as instructed by Telegraphics.
2. Design your icon:
   • Remember that it will eventually be 16 x 16 pixel in size, so don’t go overboard with details.
   • It may be easier for you to design your favicon at a larger size first, something like 64 x 64 pixel, then reduce the image size to 16 x 16 pixels after your design is finished.
   • Use a few, contrasting, saturated colors - when the icon is 16 x 16 pixels in size, it can look rather de-saturated.
3. Save your 16 x 16 pixel image as “favicon” using the .ico format.
4. Upload your favicon.ico file to your web site server in the root directory.
5. Include the following line of code to your index page, then upload.
   <link rel="shortcut icon" href="favicon.ico" />

Troubleshooting

If your favicon doesn’t show up after the above steps, check the following:

• Check that your favicon has been uploaded to the correct web site and to the correct folder (the root folder).
• Check that your favicon exists by typing in the path of the favicon in your browser, eg http://www.zann-marketing.com/favicon.ico
• Check that the link tag on the index page refers to the correct path.

If your favicon still doesn’t show up after the above troubleshooting steps, it may be because your web browser is using some internal caching and the favicon has not been refreshed. To check if your favicon is really there:

• Wait a day or so then check your web site again, your web browser should have refreshed its cache by then.
• Try viewing your web site using another browser.
• Use Internet Explorer and bookmark your web site, the favicon should appear on the next reload of your web site in Internet Explorer.