A simple approach to favicon.ico

When you visit a website, your browser may display a small icon just inside the left edge of the address bar. Usually this icon is derived from a file named favicon.ico (as in 'favorites icon') residing on the website's server. Some browsers may display the icon in other contexts: for example, on tabs or in favorites lists.

Icon (.ico) files in general and favicon.ico files in particular are as tricky as all get out. Depending on how the favicon.ico icon is created, how the icon is linked to web pages, and various browser idiosyncrasies, a particular favicon.ico may look great, may be distorted woefully, or may not show up at all.

Here's a simple way to create and implement favicon.ico icons:

1. Download IcoFX - The Free Icon Editor from http://icofx.ro/ and install this gem of an application on your computer.
2. Launch the IcoFX application and select File | New from the menu.
3. On the New Image popup, set Colors to True Color (24 bits) and Size to 16 x 16 (pixels).
4. Design your icon pixel by pixel. Use the Text or shape tools (Rectangle, Ellipse, etc.) if you're not the pixel-by-pixel kind of person. IcoFX is a powerful little icon editor, so the user interface has some complexity. But if you've ever used Windows Paint or anything like Photoshop, you'll catch on easily enough. One neat feature of IcoFX is that it allows you to create icons with transparent backgrounds.
5. Once you're satisfied with your image, select File | Save As and save your icon as a Windows Icon (*.ico) file called favicon.ico. The Windows Icon format is appropriate—indeed necessary—even if your website is not hosted on a Windows server.
6. Upload the favicon.ico file to your website's root folder.
7. In the section of every page on your website, include a link to the favicon.ico file as follows:

To get your browser to recognize the new favicon.ico file, you may need to do one, some, or all of the following:

• Navigate directly to favicon.ico; that is, type the full URL of your favicon.ico file in your browser's address bar.
• Delete your browser's cache of temporary files.
• Close and re-open your browser
• Navigate to your domain specifying the leading 'www'; navigate to your domain without specifying the leading 'www'.
• Reload (refresh) one or more of your site's pages in your browser.

Jennifer Apple in her tutorial at PhotoshopSupport.com helpfully suggests "jiggling" whatever icon is displayed in the Internet Explorer address bar to force a thorough refresh of the page. I found this to be just what the doctor ordered in one case where Internet Explorer 6 was stubborn to recognize an updated favicon.ico.

This sort of finagling likely will not be necessary for people who visit your site for the first time after you've deployed your favicon.ico file.
 

This treatment barely scratches the surface of what is possible with icons. A Windows Icon file can be built as a composite of multiple images of various sizes; depending on the context, an application (like a browser) theoretically will extract from the icon file the best image to display. That's the theory. In practice, I find that favicon.ico files containing more than one image (you can build such files easily with IcoFX) lead to unpredictable results. For pragmatic web developers interested in basic icons that most browsers will display as expected, the 16 x 16 single-image icon is a good, safe play.