How Does An OS Pick Up The Correct Ico/favicon Size?

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

Solution 1:

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

fav.ico should contain three pictures: 16x16, 32x32 and 48x48. There can be several PNG s, 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 type="image/png" href="/fav-16x16.png" sizes="16x16">.

The browsers have different attitudes toward picking the right :

• Up to Windows 7, Internet Explorer uses fav.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.

Solution 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.