时间戳

首页 > 解决方案 > 为什么 Chrome 会同时请求 .svg 和 .ico 网站图标？

html - 为什么 Chrome 会同时请求 .svg 和 .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">

如果支持 .svg favicon 的浏览器适当地使用 .svg favicon 而不使用 .ico favicon 的浏览器，这将按预期工作。我不明白为什么支持.svg favicon（如 Chrome）的浏览器也请求 .ico favicon？请参阅下面的 Chrome 瀑布：

DevTools 网络选项卡

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

标签： htmlgoogle-chromefaviconico

解决方案

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

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

现在当前的 Chrome 和 FF 将选择 svg 图标，而我仍然有旧版浏览器的后备方案。

推荐阅读