Favicons should be everybody’s favorites. (We hope that our fellow Canadians will excuse the use of American English here rather than ‘favourites’ but we wish to communicate to the widest audience possible.) If you have a Favorites or Bookmarks List, the Favicons are the small icons that may appear to the left of each Favorite in the list. At least that’s how Favicons are supposed to work. If you’re using Firefox, that’s how they do work. However if you’re using Internet Explorer Version 6 or less or Opera, you’ll find they don’t appear reliably. Help is probably on the way, so it’s worth putting a little effort into understanding how Favicons are meant to work.
For webmasters, favicons represent the biggest bang you can get for your buck. They may only measure 16 pixels x 16 pixels but they represent an important additional way of establishing brand awareness. For Internet surfers, these favicons help to provide instant confirmation of where you are. It should be a win/win situation. Regrettably many are frustrated in trying to make favicons work reliably for them.
It was Microsoft that created the original favicon feature. Microsoft’s Internet Explorer web browser looked for a favicon of a special type named favicon.ico on every website. Unfortunately Microsoft’s supported format for the link tag did not conform to the World Wide Web Consortium (W3C) HTML recommendations. This problem in standardization slowed down the acceptance of favicons. Eventually an official IANA registered MIME type for ico files was agreed as image/vnd.microsoft.icon. Before this, image/x-icon was the accepted option which complied with the rules of using x- for unregistered tokens. However many web servers do not come configured with a mime type setting for .ico files, and may send their default mime type which might be text/html or text/plain.
An additional problem with Internet Explorer is that it stores the icons in the Temporary Internet Files cache. As soon as you clear the cache (delete temporary files), you lose all of your icons. Even though the link may stay in your Favorites list it is no longer associated with its own icon. It is almost as if it is now hard-wired to the IE icon, that stylized blue ‘e’. The only way to restore a favicon to a link is to delete the link from the Favorites folder and recreate it. That’s hardly user-friendly.
It appears that help may be on the way. We soon will have Internet Explorer version 7 and this may well treat favicons as they should be treated, in other words as Mozilla Firefox treats them. Favicons will appear in Favorites lists and will also appear in the Address field of your web browser. That’s important visibility so you should make sure you have your favicon ready.
If you name your favicon file, favicon.ico, then all you need to do is put it in the root domain of your website. If you want to be absolutely sure or want to call it something different or put it somewhere different then you could put something like the following in the Head section of your web page:
<link rel="shortcut icon"
href="http://www.mywebsite/image/myfavicon.ico" type="image/x-icon" />
That’s often what is recommended and it will work. However if you want to be absolutely correct then the following is the way to do it:
<link rel="shortcut icon"
href="http://www.mywebsite/image/myfavicon.ico" type="image/vnd.microsoft.icon" />
After all, Microsoft deserves some credit for thinking of this most powerful way of using 256 pixels.
NOTE ADDED LATER: Internet Explorer Version 7 still does not treat favicons as it should. See a later post, Favicons – How To Make Them Work For You, for the best approach currently.