Favicons – How To Make Them Work For You

A previous post, The Favicons Are Coming, provides a short introduction to favicons. It was written in the fond hope that Internet Explorer Version 7, in trying to emulate Mozilla Firefox as it so often does, would perhaps make favicons a robust feature of Internet surfing. In Firefox, you’ll find these small 16 x 16 pixels icon images for a given web page appear in several places, namely the address window, on a tab and also in your Favorites or Bookmarks list. They provide instant recognition of a web site and for the ones I know well are all I display in my Bookmarks toolbar in my default Firefox browser. Here for example are the ones associated with this and related websites: BPWrap Strategic Marketing Montreal The Other Bloke's Blog StayGoLinks

Well now Internet Explorer Version 7 is officially released. After some thorough testing, the IE v.7 way of handling favicons seems no better than previous versions. You can get the sense of frustration of many others in a forum entry, Keeping The Favicon in IE Favorites, which started in November 2005 and still has not produced an answer. In The Favicons Are Coming, we paid tribute to Microsoft as the inventor of the .ico favicon file and set out the advice accordingly. It was largely correct, but here we re-present the information in a more practical fashion. The first part will detail how to make favicons work in Firefox. The second part (optional and provided only for the really keen) will detail how you can try to make them work somewhat in IE and other browsers.

Making Favicons Work In Mozilla Firefox

1. Make your 16 x 16 pixel icon image as a .png or a .jpg file. For example you might call it myfavicon.jpg Load it into a suitable place on your domain, say http://www.mysite.com/images/myfavicon.jpg
2. Add the following code in the HEAD section of any web page for which you wish the favicon to appear.
<link rel="shortcut icon"
href="http://www.mysite.com/images/myfavicon.jpg" type="image/x-icon">

3. The favicon image will appear correctly in all the places it should.

Trying To Make Favicons Work In Internet Explorer

1. The IE way involves an icon image file with the extension .ico A .ico file is not just a .bmp file renamed with the extension changed to .ico. It is a much more complex file that holds two icon images, a 32 x 32 pixel file and a 16 x 16 pixel file. You can if you wish only include the 16 x 16 pixel image. A somewhat old article, Making a Favicon, describes the process well. You normally can start with a .bmp file or .jpg file and convert it to a .ico file. The AxiomX Pixel Toolbox 1.1 is free software that will handle this conversion, usually without too much trouble.
2. You then load up the .ico image file to the root folder of the website, i.e. at http://www.mysite.com/
3. The favicon image will sometimes appear the very first time you visit a website and sometimes will persist in your Favorites list. More often it disappears after a first appearance and is replaced by the generic IE favicon. Since Firefox will correctly handle such a .ico file, this is a worthwhile thing to do if you have the time. It may also be helpful for other browsers.

How Well Will Your Favicons Work?

Always in Firefox: rarely in Internet Explorer

However much effort you put into creating and loading favicons, other browsers than Firefox may still handle favicons unreliably. For example, Opera will sometimes display them and sometimes not. It will also use the favicon.ico image in the root file if it exists for some purposes and will use the favicon identified by the HEAD link tag for other purposes. Other websites may also use favicons in an unpredictable way too. Normally Bloglines should show favicons correctly but even when viewed in Firefox will not always do so.

The favicon is such a useful identifier for those who see it that the effort is certainly worthwhile. Hopefully as time goes on, more and more browsers will come in line with the Firefox approach to favicons.

8 thoughts on “Favicons – How To Make Them Work For You”

  1. No wonder many visitors of mine complained about not being able to see my favicon in IE. Thanks for that.
    A point to ponder though, the new Google favicon reflected in my IE without any hiccups. hmm.. I wonder why.

  2. If you follow the rules, then sometimes IE will display the favicon in the address bar and in the Favorites list, as it is currently doing for me for Google too. However it is inconsistent and sometimes will disappear after a few appearances. At the moment there are only two that still show favicons in my Favorites list although most have shown favicons at the start.

  3. Internet Explorer is indeed inconsistent when it comes to displaying the Favicon derived from your creative genius. I used to take it personally, then I realized they hate everybody equally, not just me. In any case, it led me on a quest to discover what the others did – Netscape/Firefox, and since they allow animated favicons, I had to have two per site now, one animated for the latter, and a static favicon for the flaky IE. Special head code is required. You can find tips and the head code at http://www.cathetel.com/favicon.htm if you are really interested, but for most people it just means more work. Now back to sleep. ZZZZZ.

  4. Pingback: JasonMorrison.net

Comments are closed.