为啥 Chrome 会同时请求 .svg 和 .ico 网站图标？
Posted
技术标签:
【中文标题】为啥 Chrome 会同时请求 .svg 和 .ico 网站图标？【英文标题】：Why does Chrome request both .svg AND .ico favicons?为什么 Chrome 会同时请求 .svg 和 .ico 网站图标？ 【发布时间】：2020-12-31 20:09:20 【问题描述】：截至 2020 年 9 月，大多数现代浏览器都支持 .svg 网站图标。请参阅：https://caniuse.com/link-icon-svg
但是，为了支持旧版浏览器，我的网站除了 .svg 图标之外还提供了一个 .ico 图标，并在 <head> 中提供了以下 html 链接：
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
当支持 .svg favicon 的浏览器适当地使用 .svg favicon 而不使用 .ico favicon 的浏览器时，这将按预期工作。我不明白的是为什么确实支持.svg favicon（如Chrome）的浏览器也请求.ico favicon？请参阅下面的 Chrome 瀑布：
DevTools Network Tab
如果 Chrome 已经成功下载了 .svg favicon，为什么还要继续请求 .ico favicon？ Chrome 不应该智能地选择只加载一种网站图标类型而不强制客户端下载不必要的资源吗？有没有办法指示 Chrome 只下载 .svg favicon？
【问题讨论】：
我没有尝试过，但您可能完全忽略了对favicon.ico 的引用。浏览器知道如果他们想要它就会请求它，即使你没有链接到它。因此，我猜如果浏览器无法处理您指向 SVG 的链接，它无论如何都会请求 ICO。
@Brad 我会相信你，这是一个有趣的想法。我相信它需要将 .ico favicon 放在根文件夹中，因为浏览器不知道在 images/favicon.ico 中查找它
Chrome 只是最近才实现支持，也许你应该通过他们的bugtracker 让他们知道这不太对劲
@Brad 所以我快速尝试了你的想法，但不幸的是，如果 html 中没有指定 favicon，浏览器只会在根目录中请求 favicon.ico。因此，只要 .svg favicon 仍在提供服务，即使浏览器不支持它收到的格式，浏览器也不会寻找另一个 favicon。用 Safari 13.1 测试
【参考方案1】：
最近有一个post by CSS-Tricks 突出了当前的解决方案
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
需要防止 Chrome due to bug 1162276 出现第二次。
【讨论】：
【参考方案2】：我遇到了同样的问题。为我解决的问题是将sizes="16x16" 添加到链接标签中。
这是我的完整代码：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" sizes="16x16" href="/favicon.ico">
现在当前的 Chrome 和 FF 将选择 svg 图标，而我仍然有旧版浏览器的后备方案。
【讨论】：
笔记尺寸“任意”也可以。以上是关于为啥 Chrome 会同时请求 .svg 和 .ico 网站图标？的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 SVG 在 Chrome 和 Firefox 中都缺少一半的轮廓？
为啥 Chrome 不显示带有 <use> 和 Filter="url(#id)" 属性的 SVG？