Conflicting Favicons

Question

My Blogger site generates the following line:

<link href='http://www.mtscollective.com/favicon.ico' rel='icon' type='image/x-icon'/>

And I've also added the following line for Android to use when the site is saved to the home screen:

<link href='http://cdn.mtscollective.com/images/android/icon-196.png' rel='icon' sizes='196x196'/>

The problem is that sometimes Chrome and Firefox use these interchangeably, but I only want them to use the first line. Is it possible to control this?

Thanks

Answer 1

Firefox and Chrome tend to favor PNG pictures over favicon.ico. So you should also declare a 16x16 PNG picture, along with your existing 196x196 picture.

Also note that Firefox uses the last declared PNG picture (this is bug 751712). Make sure you declare the 16x16 picture last:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">

Finally, both Firefox and Chrome lack support for the sizes attribute. As a consequence, during the first visit, they will load both PNG pictures (these are bug 751712 (FireFox) and issue 324820 (Chrome)). This is not a serious issue, but good to know this.