微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Chrome为什么同时要求.svg和.ico网站图标?

如何解决Chrome为什么同时要求.svg和.ico网站图标?

截至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网站图标的浏览器正确使用.svg网站图标而未使用.ico网站图标的浏览器时,这可以按预期工作。我不明白的是为什么 do 支持.svg网站图标(例如Chrome)的浏览器也请求.ico网站图标?请参阅下面的Chrome瀑布:

DevTools Network Tab

如果Chrome浏览器已经成功下载了.svg网站图标,为什么还要继续请求.ico网站图标? Chrome浏览器不应该聪明地选择一种网站图标来加载,而不会强迫客户端下载不必要的资源吗?是否可以指示Chrome仅下载.svg网站图标?

解决方法

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

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" sizes="16x16" href="/favicon.ico">

现在,当我仍旧使用旧版浏览器时,现在的Chrome和FF将选择svg图标。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。