How does an OS pick up the correct ico/favicon size?

Question

Based on this stackoverflow discussion, one can provide various sizes in a single file and the " OS will pick the best one to show."

How does this work? Do we assign several of them where one declaration fallsback on the other?

Orgy

Answer 1

For desktop browsers, you are supposed to have a favicon.ico file and several PNG icons.

favicon.ico should contain three pictures: 16x16, 32x32 and 48x48. There can be several PNG icons, depending of the platforms to support: 16x16 and 32x32 for desktop browsers, 196x196 for Android Chrome, etc. Each picture is declared with something like <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">.

The browsers have different attitudes toward picking the right icon:

• Up to Windows 7, Internet Explorer uses favicon.ico, as described by Microsoft.
• Internet Explorer 11 on Windows 8 pick the biggest PNG icon it can find.
• Chrome uses the 16x16 (Windows) or 32x32 (Mac) PNG icon.
• Firefox uses the latest declared PNG icon (see bug 751712), although it apparently doesn't always behave that way.
• Safari uses the biggest PNG icon it can find.

These results come from the compatibility page of RealFaviconGenerator. Full disclosure: I'm the author of this site.

Notogaea

@Orgy Yep! If you are looking for some ready-to-use material, have a look to realfavicongenerator.net , it generates everything for you. – Notogaea

@Notogaea Anyway we can induce a particular behavior? Like, can we, somehow, dictate the browser to use the 48*48 image? – Flatulent

Also, how does it work with Edge browser? I have a set of favicons but none of them work with Edge – Flatulent

@Flatulent Edge usually picks the 32x32 PNG icon. However, Edge is known to be troublesome regarding local sites (typically: with the site you are developing right now). So if your favicon works with every browsers but Edge, I suggest you to ignore the issue for now and check again once your site is deployed. – Notogaea

Answer 2

As per the excellent article from Jonathan T. Neal at http://www.jonathantneal.com/blog/understand-the-favicon/ it depends on which browser you are using:

Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices. Opera, not wanting to take sides, will choose from any of the available icons at complete random. I love that Opera does this.

Ansate