Favicons are those small images that appear in the browser’s address bar and in browser bookmarks entries. Hopefully you can see our own “small green tree” icon right now in your browser’s address bar!
There are different ways to add favicons to your web site, but after a bit of research and a bit of trial and error, we think we have hit on the best method.
With this method your favicons will also work consistently with your Web-form-buddy and Web-store-buddy script URLs.
Favicons were introduced by Microsoft some years ago, and for a while browser support for them was very patchy. In theory that situation has improved. Certainly you can now enjoy the benefits of favicons for your web site without it driving you completely crazy. But although there is supposed to be a proper World Wide Web Consortium (W3C) standard now for favicons, in practice we reckon you’re better off ignoring that for the time being. Hey, Microsoft are involved, what do you expect!
The problem began when Microsoft decided that favicons should be in their own format. Not *.PNG, *.GIF, *.JPG or anything sensible like that. Instead we got *.ICO – the format for icons in Windows.
Originally the idea was that you placed such a graphic (called “favicon.ico“) in your web site’s root folder (i.e. where your home page resides). And if you inspect your server’s access logs you will see that browsers are regularly putting in requests for that file. This old method DOES work at least (and in most browsers), but it is not at all flexible:
- You have to name it “favicon.ico“
- It must reside in your document root folder
- You cannot have more than one favicon for your site
- Worst of all! – this method won’t work with your Web-form-buddy and Web-store-buddy URLs.
So as the web moved on, folks started to ask searching questions such as “Hey, shouldn’t this be part of the HTML standard?“. And “Shouldn’t we be able to use non-Microsoft file types?“. And “Why can’t I specify this graphic in my web page HTML? That way I get to manage the graphic in the normal way – and maybe I can use different favicons on different pages!“. On top of that, millions and millions of webmasters said “We’d also like a method that works with Web-form-buddy and Web-store-buddy too!” (Well maybe we exaggerate a little).
Enter the standards fairy – the World Wide Web Consortium (W3C) . All these wishes have now been granted, and we have a new method available (supported by all browsers) whereby you add a link to your favicon in the <head> area of your web page. The W3C ’s draft proposal as to how you should do this is here: http://www.w3.org/2005/10/howto-favicon
But here’s the BAD news: If you follow their recommendation, your favicons will not work in Internet Explorer! This is for two reasons:
1) Internet Explorer will only work with *.ICO files. So whereas the folks at W3C say you can do this:
<link rel="icon" type="image/png" href="/some-folder/some-image.png">
<link rel="icon" type="image/gif" href="/some-folder/some-image.gif">
<link rel="icon" type="image/jpeg" href="/some-folder/some-image.jpg">
Instead you’re going to need this:
<link rel="icon" type="image/vnd.microsoft.icon" href="/some-folder/some-image.ico">
2) But even THAT doesn’t work in Internet Explorer! You need to change “icon” to “shortcut icon“:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/some-folder/some-image.ico">
Or if you’re working with XHTML, it’s this:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/some-folder/some-image.ico" />
And now, finally you have something that will work in all browsers!
(By the way, we’ve seen some folks suggesting for the “type” attribute that you should use “image/ico“, “image/icon“, “text/ico“, “application/ico” and “image/x-icon“, instead of type=”image/vnd.microsoft.icon“. This is a mistake though. The official mime type is “image/vnd.microsoft.icon“).
So how best to create and edit ICO files?
Favicons are 16×16, 32×32 or 64×64 pixel square images. With the free @icon sushi you can open BMP/PNG/PSD/EXE/DLL/ICL files and convert them into ICO files.
A listing of ICO editing software is here: http://en.wikipedia.org/wiki/List_of_icon_software
