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?

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.