What's the favicon.ico file I see in my error logs?

How can I set up a custom favorites icon for my website?

We can answer both questions at once.

If you check your website's access logs (or read the custom Monthly 404 Gazette we send to all of our customers), you may have noticed a file not found error for favicon.ico and wondered what it was.

Likewise, if you use Internet Explorer on Windows computers or Konqueror on Linux to view web pages, you may have noticed some webpages display a custom icon in the favorites menu and in the address bar. That custom icon and the favicon.ico file are one in the same.

Both IE 5.0+ and Konqueror support custom webpage icons in the form of the favicon.ico file (currently, Netscape browsers do not). Having your own custom icon is a pretty straightforward process, and one you could easily accomplish in well under an hour.

The favicon.ico file is a custom icon, or small graphic, like the recycle bin or trash can on your desktop display. Enabling your website to display a custom icon gives your site a little more style and personality, and is an opportunity to give "brand recognition" to your website to the people who visit it.

The favicon.ico graphic will show up in a user's Favorites list, in the History and Address bar of the browser, and as the icon for any Quickstart, Desktop or Start Menu shortcuts anyone might make to any page on your website.

You'll need to create an icon in the proper format and resolution. The easiest way to do this is to use icon editing software like MicroAngelo on the PC, or Gimp on Linux.

Favicon.ico files can be in 8-bit, or 256 colors, or (to support older hardware that your website visitors might use) in 4-bit, or 16 colors. They'll also be one of two sizes—either 32 pixels x 32 pixels (for most Desktop or Start Menu display), or 16 pixels x 16 pixels (for most Favorites Menu display).

From the top: 16 color, 16x16; 256 color, 16x16; 16 color, 32x32; and 256 color, 32x32.

This gives us a total of four possible icon resolutions, as seen in the table to the left. A single icon file can theoretically store many different resolutions, but the most you'd need for any web application would be these four.

Most icon editing software packages will allow you to cut and paste—and even do the resizing for you—among the different sizes and color resolutions. For that reason, we recommend starting at 32x32 and working down from there.

For more information regarding icon resolution issues, check out the documentation of your icon editing utility, or drop us a line and we'd be happy to suggest some other resources.

When you're ready to save your icon, keep in mind that the maximum allowable file size is just over 1k (or kilobyte) at 1,046 bytes. You can usually find this information easily either through the icon editing software or through the operating system of your computer in a file or folder view.

You'll also want to be sure to name your file favicon.ico—though there are ways to use a differently named file as the favorites icon web browsers will display (see below).

Now all you have to do is upload your favicon.ico file to the root directory of your website, which would be your htdocs folder, and any other subdirectory you have to ensure browsers will display the same icon for every webpage on your site anyone is likely to bookmark.

For a slightly fancier way to accomplish the same thing, you can use this HTML tag:

... and you can substitute any file name or icon for favicon.ico here, which would enable you to have different icons for different pages or directories of your website, as well. Don't forget that if you're using an icon in a different directory, you'll have to specify the URL correctly, for instance: