We use the following code to add icons for favicon, tablets, smartphones, windows 8 tiles and the like:-

<link rel="apple-touch-icon" href="apple-touch-icon.png">

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

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

Unfortunately this doesn't seem to work for IE9 and IE10's 'your most popular sites screen', google searches have been un-enlightening.

Stack uses <link rel="apple-touch-icon" href="apple-touch-icon.png"> which seems to work for it, but not for us.

Any clues to a solution appreciated.

enter image description here

  • 1
    Is it failing only on this screen? eg. Does the icon get loaded by the browser tab when visiting normally? That wouldn't definitively prove anything, but it'd be a bit informative. You otherwise seem to have covered the favicon situation pretty thoroughly. I'm not sure I'd worry about this too much. Browsers have been notoriously flaky about loading favicons in general for ages. Also, does it happen for everyone? – Su' Sep 9 '12 at 10:12
  • None of the icons are 404'ing, and the favicon works in other browsers, as do the touch icons. This is one of those very annoying 'the chairmain notices' issues. Having spent the morning on it, curiousity and frustration have got the better of me. – MJWadmin Sep 9 '12 at 11:01
  • 3
    Have you tried the actual PNG image that stack uses? In case there is some anomaly with the PNG format itself? – MrWhite Sep 9 '12 at 11:12
  • 1
    Other browsers aren't relevant here; I meant does the icon load in regular IE tabs. Lack of 404s won't tell you anything, either. It has nothing to do with whether or not the image is really there. Browsers are just generally fickle about loading favicons, period; when it makes itself a problem there's often little that can be done(clearing cache, and anything else you might think of: might work, might not; it'll be a surprise!) They've gotten better about it over time, but it still happens. Firefox just failed loading a favicon in a tab for a site already open in another tab, with icon. – Su' Sep 9 '12 at 11:35
  • 1
    Could you post a link to the website in the comments? – user6901 Sep 10 '12 at 21:39

Where is your ico file? I can see it's in root folder, then you don't need the slash behind it, remove the slash from behind your file, also you don't need type="image/x-icon"

Your ICO file should be a normal icon library with different needed icon sizes.

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

Just use the above code, it works perfectly for IE9, IE10, FX and Chrome.

If you had different favico before, you need to refresh your browser's cache too.

| improve this answer | |
  • assuming the file actually is in the root folder, the problem is surely the file, not the html tag as shown (unless there are other html errors further down that cause IE issues). My favicon link tag is written just like @MJWadmin and my icon loads fine in IE9 favorite tabs – WebChemist Oct 9 '12 at 8:03

What are the dimensions of your favicon? Check this list to make sure they fall within these guidelines:

Customizing the Site Icon - Site Icons in Internet Explorer 9


Looking at Stackoverflow's source code, I see 2 icon images:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">


<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

When I look at my stackoverflow in my favorites tab in IE9, it looks like its using the 16x16 favicon (and centering it in a 32x32 container), not the 158x158 stackoverflow apple touch icon as you suggested because if you look at the png, the "padding" distance ratio from side vs bottom is about 2.5:1 where as its 1:1 in the favicon, same as the 1:1 padding on the IE9 tab...

I can tell you my employer's favicon does load in IE9 favorites, and its 64x64 (no transparency, size 12.5kb). If you still can't get your favicon to show, post a link so we can check out the actual image file

| improve this answer | |

Either try like Omne suggests and remove your type attribute or add a second one with image/vnd.microsoft.icon as a value. And then make sure your server is sending the mime type for dot ico files. See this:


Some Backstory

It used to be, or rather it has been argued about what the correct mime type is for icons.

Microsoft world used to and probably still relies on "image/vnd.microsoft.icon" where as the rest of the world uses "image/x-icon" unofficially (officially) lol.

From wikipedia ICO Format:

The official IANA-registered MIME type for ICO files is image/vnd.microsoft.icon, registered in 2003. Erroneous labels "image/ico", "image/icon", "text/ico" and "application/ico", along with the unofficial name "image/x-icon" were in use at the time of official registration and assignment of the MIME type.

yet From from wikipedia for Favicon

In 2003, the .ico format was registered with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon.[12] When using the .ico format, Internet Explorer cannot display files served with the standardized MIME type. A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.