我的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 上添加到主屏幕)。
问题是这两个图像都是由 Firefox 在启动时获取的(其他浏览器没有这个问题)。这是为什么？我可以采取什么措施来防止这种情况发生？
最佳答案
查看 Firefox DevTools Network 选项卡，两个 favicon 请求都是由 FaviconLoader.jsm 发起的。查看代码，loadIcons() 似乎加载了一个丰富的图标和一个选项卡图标，由 selectIcons 选择。
selectIcons 选择最佳选项卡图标和丰富图标的方式如下:
- 选项卡图标是 svg 图标、大于 16x16(对于正常 dpi)的最小图标或 ico 文件，按偏好升序排列。
- 丰富图标是最大的丰富图标(即大于 96x96)。
在您的例子中，48px 图标是选项卡图标，192px 图标是丰富图标，因此有两个请求。
Firefox 可能将丰富的图标用于新标签页上的顶级站点图标。
我认为您无法阻止这种情况，但浏览器通常会在页面加载后获取网站图标，因此它不会影响您网站的性能。
关于html - 为什么浏览器会调用多个网站图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64942394/