Your Favorite Icon

On this page:

Missing File?
Embedded icon?
Favorite Icon
Specifications
Caveats

"I keep seeing lots of 404 errors in my server logs for a file called 'favicon.ico'. I'm not linking to that file anywhere - I don't even know what it is! So where are all these errors coming from?"
Well, this is a good sign! How can 404's be good? Read on....

"How in the world do you imbed those icons...This is driving me nuts trying to figure out!!!"
Same question, really, but coming from the other end as it were.

If you've analyzed your server logs closely, you may have noticed that these 404's are produced only by Internet Explorer 5. It's a new feature which can be very nice for the visitor but a headache for those webmasters who don't know about it yet. So what's going on here?

When a visitor wants to put your page in their Favorites with IE5, this browser starts looking for an icon file called 'favicon.ico'. If it's not found, that will result in a 404 'not found' error. So: lots of 404's for 'favicon.ico' means lots of people are bookmarking your pages. That's good, isn't it? But you'd better avoid all those errors.

If the icon is found, it will be downloaded, and used to mark the file that was bookmarked in the browser. Instead of the normal "internet document" icon in the Favorites menu. the visitor will see yours. When the page is loaded in the browser, it will also appear in front of the URL in the Address field. Makes your site stand out!

Microsoft calls this a shortcut icon. They have a page in their MSDN section describing how to set this up - but that page doesn't tell you all. I have a few extra tips for you.

• First, you need to create a standard Windows icon file, for instance with Microangelo, a specialized icon editor that I use for such work, but there are many others. It has to be 16x16 pixels, but you can "stack" icons with different color depths in the file: IE will know how to handle them. You can even put icons of different sizes in there, as long as there is one that has size 16x16. So if you already have an icon that conforms to these specifications, you can use that. But a single 16x16 icon with 16 colors is enough.
• How you name your icon, depends on what you want to do with it:
• As Microsoft describes, you can link a specific icon to a specific page with a LINK tag in the HEAD section of your page such as:

  <link rel="shortcut icon" href="icons/myicon.ico">

  Of course you need to make sure that icon name and location correspond with the URI the href in the LINK tag points to; the URI can be fully qualified or relative, whatever you prefer. The above example assumes an icon directory where you store such shortcut icons, in this case one named myicon.ico. You can name the icon whatever you like, and link to it from every page you want to associate it with.
• You can also associate an icon with any page in your site. To accomplish this, name your icon favicon.ico, and place it in the root of your site. Now you don't need a LINK tag: if someone bookmarks any page in your site that does not have this LINK tag, IE will search for 'favicon.ico', find it in the root, and download and associate it with the bookmark.
• Another thing Microsoft doesn't tell you is how it searches for 'favicon.ico' when a visitor bookmarks a page. It starts in the current directory. If it doesn't find the file there, it will work its way up to the root. This means two things:
  1. If your document is in the site root, that is the current directory. If the icon isn't found in the current directory, IE will look in the root. Yes, that means two 404's for a single bookmarked page. Dumb, but true.
  2. If you have "subsites" on your site that are located in a specific subdirectory, you can exploit the searching mechanism: create an icon for your subsite, call it again favicon.ico and place it in the same subdirectory your subsite is located in. Any page in the subsite, when bookmarked, will now get this specific icon associated with it because it's found before IE starts looking in the root. (I'm using this for The Bookstore on this site: it has its own icon.)
• If you add this page to your Favorites with IE5, you should get a special "Tip" icon since I've used the LINK tag technique for this page.

There are a few caveats:

• When found, the icon is downloaded, but it goes into the cache. If the visitor has disabled cacheing, it won't appear at all. But even if cacheing is enabled, eventually the file will be discarded, unless the user bookmarks the page again.
• Another point: we're talking about Windows icon files here. So quite likely this technique will work only for Internet Explorer running on the Windows platform, although Microsoft's page doesn't specify this.
• It seems that in some cases (probably dependent on server configuration) the icon isn't downloaded when "http://domain/" is bookmarked but it is, when "http://www.domain/" is bookmarked - so test what happens with your site!
• I've said the file needs to be a standard Windows icon. But what if you don't have an icon editor? You can create a standard 16x16 bitmap (.bmp) with Paint for instance, and rename it with an .ico extension. Although a Windows icon file technically is not the same as a Windows bitmap file, they are similar enough that Internet Explorer will accept this. Of course, you cannot "stack" different variants of the icon in the same file this way. (Note that I've not tested this trick myself but I've heard it works. If you find it doesn't work, please let me know!)