为什么浏览器进行多个图标调用？
Why is the browser making multiple favicon calls?
浏览器是Firefox。这不是 chrome 上的问题
我的 index.html 中有以下内容用于获取网站图标：
<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" />
第一个 link 是一张 48x48 像素的图像，因为我希望浏览器使用它来加快网络调用速度。
第二个 link 用于 192x192 像素，以防需要更大尺寸的图像（例如 ios 添加到主屏幕）。
问题是这两个图像都是在浏览器开始时获取的。为什么会这样？我该怎么做才能避免这种情况？
查看 Firefox DevTools 网络选项卡，两个网站图标请求均由 FaviconLoader.jsm 发起。查看代码，似乎 loadIcons() 加载了由 selectIcons 选择的丰富图标和选项卡图标。
selectIcons选择最佳标签图标和丰富图标的方式如下：
- 选项卡图标是svg图标，大于16x16（正常dpi）的最小图标，或ico文件，按优先顺序升序排列。
- 富图标是最大的富图标（即大于 96x96）。
在你的例子中，48px 的图标是选项卡图标，192px 的图标是丰富的图标，因此有两个请求。
新标签页上的热门站点图标可能被 Firefox 使用了丰富的图标。
我认为您无法阻止这种情况，但网站图标通常是在页面加载后由浏览器获取的，因此它应该不会影响您网站的性能。
浏览器是Firefox。这不是 chrome 上的问题 我的 index.html 中有以下内容用于获取网站图标：
<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" />
第一个 link 是一张 48x48 像素的图像，因为我希望浏览器使用它来加快网络调用速度。 第二个 link 用于 192x192 像素，以防需要更大尺寸的图像（例如 ios 添加到主屏幕）。 问题是这两个图像都是在浏览器开始时获取的。为什么会这样？我该怎么做才能避免这种情况？
查看 Firefox DevTools 网络选项卡，两个网站图标请求均由 FaviconLoader.jsm 发起。查看代码，似乎 loadIcons() 加载了由 selectIcons 选择的丰富图标和选项卡图标。
selectIcons选择最佳标签图标和丰富图标的方式如下：
- 选项卡图标是svg图标，大于16x16（正常dpi）的最小图标，或ico文件，按优先顺序升序排列。
- 富图标是最大的富图标（即大于 96x96）。
在你的例子中，48px 的图标是选项卡图标，192px 的图标是丰富的图标，因此有两个请求。
新标签页上的热门站点图标可能被 Firefox 使用了丰富的图标。
我认为您无法阻止这种情况，但网站图标通常是在页面加载后由浏览器获取的，因此它应该不会影响您网站的性能。