迹忆客 专注技术分享

大多数站点使用以下 HTML 来指定网站图标：

<link rel="shortcut icon" href="/favicon.ico">

看起来不错，对吧？ 你猜怎么着——不是！

今天，我了解到快捷方式不是有效的链接关系。 事实上，它并没有出现在 HTML5 规范的第 4.12.5 节“链接类型”中。 事实上，它是 Internet Explorer 专有的。 如果没有 IE，rel="icon" 就足以指定一个图标。

那么，是不是一定要用 shortcut 来支持IE呢？ 一点也不。

如果 rel 属性中省略了快捷方式值，Internet Explorer ≤ 8 将完全忽略该声明，在站点根目录中搜索名为 favicon.ico 的文件，并使用该文件代替。 事实上，当没有指定链接 rel="icon" 时，几乎每个浏览器都会这样做。 使用 rel="icon shortcut" 在 IE 中也不起作用，因为它不会将 rel 属性视为空格分隔的列表。

更新 ：如果 Release Candidate 有任何迹象表明，如果我们指定 type="image/x-icon"，IE9 将不再需要快捷链接关系。 不用说，这仍然很糟糕——更有理由将图标命名为 favicon.ico 并将其放在域的根目录中。

只要确保始终将网站图标放在站点的根目录中，并将其命名为 favicon.ico 即可。 这样，无论我们是否在链接元素中指定它，Internet Explorer 都会检测到它。 如果你省略了整个链接 rel="icon" 声明，其他浏览器也会去寻找那个文件。 根目录中没有 favicon.ico 文件会导致很多 404 错误。

几乎所有现代浏览器都默认查找 /favicon.ico：Opera、Safari、Chrome、Firefox、Internet Explorer 5+。 目前唯一不这样做的浏览器是 SeaMonkey。

（不过，SeaMonkey 确实提供了“当页面未定义网站图标时积极查找网站图标”设置，但默认情况下它是禁用的。Firefox 则相反：它在 about:config 中有一个 browser.chrome.favicons 条目 可以将其设置为 false 以禁用此行为，但默认值为 true。）

请注意 ，这甚至适用于非 ICO 格式的图标！ 支持 SVG favicons 的浏览器寻找 /favicon.ico 都是一样的，没有什么能阻止你在那个 URL 上提供 Content-Type: image/svg+xml 的 SVG 资源。 这只是一个网址。 文件扩展名在网络上并不重要。

这意味着我们可以根据需要从 HTML 中完全省略 favicon 的链接声明。 唯一真正的区别是 favicon 只会在整个文档加载完成后显示。 相比之下：如果我们明确指定它，则浏览器会在浏览器解析链接 rel="icon" 声明时立即加载网站图标。 我会说这是一个巨大的优势。 延迟加载图标绝对是值得的，这样浏览器就可以专注于首先加载文档和所有其他资产。

如果我们希望自己的网站图标尽快加载和/或如果我们坚持要在 SeaMonkey 中显示它，可以简单地使用以下代码：

<link rel="icon" href="/favicon.ico">

另一个更新：HTML 规范现在明确提到 /favicon.ico：

在没有带有 icon 关键字的链接的情况下，对于通过 HTTP 或 HTTPS 获取的文档，用户代理可能会尝试获取并使用通过根据文档地址解析 URL /favicon.ico 获得的绝对 URL 的图标，就好像 该页面已使用 icon 关键字声明该图标。

更新 ：由于历史原因，HTML 规范现在允许使用 shortcut 作为链接关系，前提是它紧跟一个 U+0020 空格字符和图标关键字。 当然，最好不要使用任何 HTML。

更新 ：Internet Explorer 11 将支持 GIF 或 PNG 图标，而不仅仅是 .ico 文件。 然而，**/favicon.ico** 仍然是隐含的默认值。