html - 浏览器如何为网站选择图标？

Question

当一个网站提供多个图标时 link标签，浏览器采用什么样的规则来确定实际使用哪个图标？

例如IMDB的html src包括以下片段:

<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">            

选择了哪个图标，其他图标用于什么？

我注意到带有 rel="shortcut icon" 的那个始终设置为最高优先级。如果是这样，浏览器将如何处理具有多个 shortcut icon 的网页？标签？

Answer 1

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

我已经通过实验测试，当多个 shortcut icon提供链接，只要每个链接有一些不同的属性，例如类型或大小，浏览器就会根据屏幕 DPI 或接受的 MIME 类型等因素选择最佳图标。

事实上，我在我制作的网站的标题标签中有以下片段:

<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">

我注意到每个现代浏览器都会选择图标的 PNG 版本。事实上，我还没有看到任何 MS-ICO 版本图标的用法，尽管我还没有测试过旧浏览器(例如旧版本的 IE)是否会选择 ICO 版本而不是 PNG 版本。

当使用 HiDPI 屏幕时，我注意到将选择 32x32 版本以便在选项卡中显示为 16x16@2x 图标。否则，将选择 16x16 版本。将浏览器窗口从 HDPI 移动到非 HDPI 浏览器窗口将使浏览器重新评估当前的图标，如果需要，它将更改它。