Favicon not showing up in address bar in IE9 - yet is displayed there in all other browsers

Question

This one is really odd - and I've tried everything I can think of. I have no issues with this in Firefox, Chrome or Opera. And when I change the icon on the server, it is updated immediately on the other browsers, but still doesn't show up in IE9.

Incidentally, the image is displayed in my "favorites" list when I add it to favorites in IE9 - it just won't show up in the URL address bar. I've also verified that the ico file works for another website. I've also faithfully cleared the IE browser history/temporary internet files each time I've made a change. Here are a couple of the code versions that I've tried in the .ASPX file. The first version is working on another ASPX web site that I'm running:

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

Answer 1

Aplies to Windows 7 and ie 9 or higher!

I struggled with this favicon problem for days - it showed in all the browsers but not in ie9!

I suspected the file format; speifically its definition-header which defines the structure for the favicon.ico, as it was the only thing left to examine having followed several tutorials and methods to the letter without success!

It seems I was right – windows 7 + ie9 expect the icon to be constructed as 4 icons all contained within one file.

Step by step:

1)I constructed a 64x64 pixel 24 bit color graphic and saved it as a png file

2)I imported this file into a freebee called X-icon Editor get it here http://www.xiconeditor.com/

3)Once I previewed the result (there will be four images 64x64, 32x32, 24x24 and 16x6 (all in pixels) and was happy with the result:

4)I exported the result and noted the tips before doing the export…

5)I then used the save as facility and directed the file to the root of my site files (where the index.html file is located) The file I saved was favicon.ico

6)If you wish to view the files go to the site directory on your hard drive and double click on the favicon.ico file and Windows Photo Viewer will show you 4 pages each representing the icon size.

7)Edit your code under as follows (the detail is found in tips step 4): under the head tag insert this tag: link rel="shortcut icon" href="favicon.ico"/

8)Upload the changes to your server.

9)Clear the ie9 cache files

10)Wait about 20 minute (may take longer)

11)Log onto your site and you should see the favicon

So what are the other icons all embedded into a single favicon.ico file?

64x64 are the large icons used by windows (if you create a shortcut on your desktop which has large icons the favicon will show your graphic in 64x64pixels),

32x32 same as above but for a desktop set for medium desktop icons

24x24 same as above but for a desktop set for small desktop icons

16x16 is the favicon used on your web page. Its also the icon used in the pinto area at the bottom bar of the desktop (taskbar)– move the shortcut from the desktop to the task bar and you’ll see it resize

All done – it works – be patient for it to appear!

PS (advanced users) you can have more than one "Favicon" file but you'll need to rename all of them
then under the head tag point to each of the icon files for the various pages - but you're only allowed one (or none for multiple files) favicon.ico files.... gets a bit hairy if you are a novice but go for it