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

Question

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

例如，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

浏览器会如何处理带有多个快捷方式图标标签的网页？

我经过实验测试，当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 浏览器窗口将使浏览器重新评估当前的图标，如果需要，它将更改它。