How do browsers select a favicon for a website?

Question

When a website provides more than one favicon link tag, what kind of rules does a browser take to determine which icon to be actually used?

For example, the html src of IMDB includes following snippet:

<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">            

Which icon is selected and what does other ones used for?

I noticed that the one with rel="shortcut icon" is always set as highest priority. If so, what will a browser do with a webpage with multiple shortcut icon tag?

Answer 1

What will a browser do with a webpage with multiple shortcut icon tag?

I've experimentally tested that when multiple shortcut icon links are provided, as long as each link has some different attribute such as the type or size, the browser will pick the best icon depending on factors such as the screen DPI or the accepted MIME types.

As a matter of fact, I have the following snippet in the header tag of a website I made:

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">
<link rel="shortcut icon" href="/assets/16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/assets/32x32.png" type="image/png" sizes="32x32">

I've noticed that every modern browser will pick the PNG version of the icon. In fact, I haven't seen any usages of the MS-ICO version of the icon, although I haven't tested if older browsers (such as older versions of IE) will pick the ICO version over the PNG version.

When a HiDPI screen is used, I've noticed the 32x32 version will be picked in order to be presented as a 16x16@2x favicon in the tab. Otherwise, the 16x16 version will be picked. Moving the browser window from a HDPI to a non-HDPI browser window will make the browser re-evaluate the current favicon and if needed, it will change it.