为什么浏览器会进行多次 favicon 调用？

【问题标题】：Why is the browser making multiple favicon calls?为什么浏览器会进行多次 favicon 调用？
【发布时间】：2020-11-21 11:12:25
【问题描述】：

浏览器是火狐。这不是 chrome 的问题我的 index.html 中有以下内容用于获取 favicon：

      <link rel="icon" href="https://cdn-xyz.favicon.png" type="image/x-icon" />
      <link rel="apple-touch-icon" sizes="192x192" href="https://cdn-xyz.favicon-192.png" type="image/x-icon" />

第一个链接是一个 48x48 像素的图像，因为我希望浏览器使用它来加快网络调用。第二个链接指向 192x192 像素，以防需要更大尺寸的图像（例如在 ios 上添加到主屏幕）。问题是这两个图像都是在浏览器开始时获取的。为什么会这样？我可以做些什么来防止这种情况发生？

【问题讨论】：

标签： html firefox favicon rel

【解决方案1】：

查看 Firefox DevTools Network 选项卡，两个 favicon 请求都是由 FaviconLoader.jsm 发起的。查看代码，loadIcons() 似乎加载了一个丰富的图标和一个标签图标，由selectIcons 选择。

selectIcons选择最佳tab icon和rich icon的方式如下：

选项卡图标是 svg 图标、大于 16x16 的最小图标（对于普通 dpi）或 ico 文件，按偏好升序排列。
富图标是最大的富图标（即大于 96x96）。

在您的情况下，48px 图标是选项卡图标，192px 图标是丰富图标，因此是两个请求。

丰富的图标可能被 Firefox 用于新标签页上的热门网站图标。

我认为您无法阻止这种情况，但网站图标通常是在页面加载后由浏览器获取的，因此它不会影响您网站的性能。

【讨论】：