为什么 Chrome 请求 .svg 和 .ico 图标? [英] Why does Chrome request both .svg AND .ico favicons?

查看:64
本文介绍了为什么 Chrome 请求 .svg 和 .ico 图标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Most modern browsers support .svg favicons as of Sep 2020. See: https://caniuse.com/link-icon-svg

但是,为了支持旧版浏览器,我的网站除了提供 .svg 网站图标之外,还提供 .ico 网站图标,并在 中提供以下 html 链接:

However, in order to support legacy browsers my site serves a .ico favicon in addition to a .svg favicon with the following html links in <head>:

<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 收藏夹图标的浏览器的情况下按预期工作.我不明白的是为什么支持 .svg 图标(如 Chrome)的浏览器也请求 .ico 图标?请参阅下面的 Chrome 瀑布:

This works as expected where browsers that support .svg favicons appropriately use the .svg favicon while browsers that do not use the .ico favicon. What I don't understand is why browsers that do support .svg favicons (like Chrome) also request the .ico favicon? See the Chrome waterfall below:

DevTools 网络标签

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

If Chrome has already successfully downloaded the .svg favicon why does it go on to request the .ico favicon as well? Shouldn't Chrome intelligently select only one favicon type to load without forcing the client to download unnecessary resources? Is there a way to instruct Chrome to only download the .svg favicon?

推荐答案

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

I had the same problem. What solved it for me was adding sizes="16x16" to the link tag. Here's my full code:

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

现在当前的 Chrome 和 FF 将选择 svg 图标,而我仍然有旧浏览器的后备.

Now current Chrome and FF will choose the svg icon while I still have a fallback for older browsers.

这篇关于为什么 Chrome 请求 .svg 和 .ico 图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆