时间戳

首页 > 解决方案 > 为什么浏览器会进行多次 favicon 调用？

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

问题描述

浏览器是火狐。这不是 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 上添加到主屏幕）。问题是这两个图像都是在浏览器开始时获取的。为什么会这样，我能做些什么来防止这种情况发生？

标签： htmlfirefoxfaviconrel

解决方案

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

选择最佳选项卡图标和丰富图标的方式selectIcons如下：

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

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

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

我不认为你可以阻止这种情况，但网站图标通常是在页面加载后由浏览器获取的，所以它不应该影响你网站的性能。

推荐阅读