Mobile app version of vmapp.org
Login or Join
Merenda212

: Your Most Popular Sites Screen in IE 10 - Icons not appearing We use the following code to add icons for favicon, tablets, smartphones, windows 8 tiles and the like:- <link rel="apple-touch-icon"

@Merenda212

Posted in: #Favicon #InternetExplorer

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.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Merenda212

3 Comments

Sorted by latest first Latest Oldest Best

 

@Goswami781

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:
github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
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.

10% popularity Vote Up Vote Down


 

@Rivera981

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

Edit

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

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


AND

<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

10% popularity Vote Up Vote Down


 

@Angie530

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme