blogZero

Friday, March 24, 2006

How to Add a Favicon to your Site

An interesting message landed in my inbox today. Karl Dubost, who (among other roles) is the Activity Lead for the W3C Quality Assurance Interest Group, posted a link to a draft document: How to Add a Favicon to your Site.

The document is open for reviews, suggestions and proposals. The future of this document will depend on your comments and if the QA IG as large thinks it would be interesting to give it more visibility.

The document proposes two methods of specifying such icons and suggests the first as a standard.

Use a <link> element in the <head> section of your document with a rel attribute of "icon" and define the relationship through the use of an HTML profile. I happen to agree with this approach and use it myself. See also XMDP and my own profile.
Place the image in a predefined location, usually a file called favicon.ico in the root folder of your Web site. This method is discouraged, which I also happen to agree with. However, certain browsers expect this and if you check your log files you will see countless requests for this resource. I also use this method.

A third method is very similar to the first, except the rel attribute is "shortcut icon." Patrick Lauke posted a reply in which he states that "many people wrongly use" this method. Hopefully I can get him to elaborate on this point. Again, I use this method so as many user agents as possible can find the icon.

So, why all the fuss about favicons? Funny you should ask Last week, Chris Pirillo and I spent the better part of a day exchanging emails discussing techniques for fetching the favicon from any particular URI. The solution, as it turns out, is to use the above methods until you either find the image, or are forced to abandon the attempt because no icon exists or the request times out. Here is a sample page I slapped together using PHP and some code courtesy of Paul James. If you're wondering why Chris was interested in such a technique, try a search on Gada.be or visit his blog post on the subject.

If this call for review interests you, follow this thread. If you are interested in participating, you can join the QAIG mailing list.