Are all favicon sizes fetched from the server?

Question

If I specify different image sizes for favicon PNGs like so:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Does every one of these files get fetched?

Answer 1

Quoting from http://www.jonathantneal.com/blog/understand-the-favicon/:

How do these PNG-favicon-compatible browsers determine which favicon should be used? 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.

And that’s just the beginning. Now it’s time to learn about the Internet Explorer caveats.

While IE8-10 will display the favicon on first load of the page, IE7 will skip the first load and display the favicon during repeat visits. Worse yet, IE6 will only display the favicon once the site has been bookmarked and reopened in the browser. IE6 will also drop the favicon whenever the browser cache is cleared, and it will not display the favicon again until the site is either re-bookmarked, or the favicon is somehow reloaded. If IE6 and favicons mean a lot to you, you can force this reload with a little JavaScript snippet, preferably wrapped in a conditional comment.

<!-- I "support" IE6 -->
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->

Answer 2

According to the specification, the most appropriate icon will be used. So there is no a need to fetch something that has no use.

If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes.

Answer 3

Surprisingly, I observed that some browsers are loading all PNG favicons, not only the most suitable one:

• Chrome on Windows
• Chrome on Android
• Firefox on Windows

I didn't tested other settings, like Firefox on Android.

More about the "all favicons are loaded" issue.