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"/>

Kindly

Even though you didn't exactly answer it, directly. This got me thinking about the staging site secure login vs. the www live site. I was thrown off because the other browsers still showed the icon on test. IE9 is the only browser that seemed to give me problems with this. – Kindly

Answer 1

Try putting absolute path and not relative path:

<link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/>

Also, where did you put the image. From what I recall, it will automatically pull from a certain location on your server depending on the web browser.

Contemn

I put the image in the website's root directory. I did try the absolute URL in the "href". – Kindly

You didn't exactly answer the question, but given what little information you had, you put me on the right track with your request for the URL, above. – Kindly

@Kindly What exactly was the solution to your problem? Please share for others with same issue. – Benzo

Answer 2

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

Lafond

They go up to 256x256 at every incremental block and your task bar uses 128x128 if you pin the browser tab to the task bar windows 7 & 8 – Toil

Answer 3

Try changing the rel="shortcut icon" to just "icon". This works for me.

<link rel="icon" href="/favicon.ico" />

Varanasi

Thanks, I just tried that, but it didn't work, either. And I cleared my local browser cache: history, temp files and even cookies. – Kindly

Answer 4

Use > at the end of the tag if you're using HTML4 or HTML5, and /> for XHTML.

Also, you might need to try using type="image/vnd.microsoft.icon"

Source: FavIcon (in Address bar) not working in IE 9

Kyrstin

Okay, I thought I already tried that, but I'm going to try changing the "type" property, again. – Kindly

All I can come up with that seems to be different is that I've initially put this on a "staging" site - with a secure login. Because of this, IE9 doesn't seem to want to pull the favicon, whereas the other browsers don't care. That didn't occur to me until I looked at the staging site for the other website, where this is displaying correctly for the production version. – Kindly

Answer 5

Try site: http://favicon.htmlkit.com/favicon/ (tested and working in every browser)

1) Clear browser cache. 2) Include all the images in the package which you create from the above site.

Nicolle

Answer 6

I had the same problem with fonts and favicon in IE9. While I researched extensively on client side problems, server settings were actually causing this.

The client cache control mode was set to "DisableCache" in IIS. This was causing IE9 not to load either the fonts or the favicon. All other (modern) browsers worked well.

In IIS 7 you should set cache control to "NoControl" on the either the favicon or the font folder:

<location path="fonts">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="NoControl" />
    </staticContent>
  </system.webServer>
</location>

Palladian