为什么 Chrome 请求 .svg 和 .ico 图标?

YNo*_*dom 3 html favicon google-chrome ico

截至 2020 年 9 月,大多数现代浏览器都支持 .svg 图标。请参阅:https : //caniuse.com/link-icon-svg

但是,为了支持旧版浏览器,我的网站除了 .svg 图标之外还提供 .ico 图标,其中包含以下 html 链接<head>

<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
Run Code Online (Sandbox Code Playgroud)

这在支持 .svg 收藏夹图标的浏览器正确使用 .svg 收藏夹图标而不使用 .ico 收藏夹图标的浏览器的情况下按预期工作。我不明白的是为什么浏览器支持.SVG网站图标(如Chrome)也请求。ICO图标?请参阅下面的 Chrome 瀑布:

DevTools 网络选项卡

如果 Chrome 已经成功下载了 .svg 网站图标,为什么还要继续请求 .ico 网站图标?Chrome 难道不应该智能地只选择一种图标类型来加载而不强制客户端下载不必要的资源吗?有没有办法指示 Chrome 只下载 .svg 图标?

小智 7

我有同样的问题。为我解决的是添加sizes="16x16"到链接标签。这是我的完整代码:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" sizes="16x16" href="/favicon.ico">
Run Code Online (Sandbox Code Playgroud)

现在,当前的 Chrome 和 FF 将选择 svg 图标,而我仍然可以使用旧浏览器。

  • 注意“任何”尺寸也可以。 (2认同)