网站如何规范的调用 favicon.ico 和图标属性的规范使用指南

网站的前端开发规范其实相对比较随意，在代码规范上难免各式各样的格式，我们如今也是在不断的优化我们网站的书写规范，所以刻意的查阅了关于网站调用 favicon.ico 的规范以及 icon 属性的使用，其中主要就是 rel="icon" 、rel="shortcut icon" 的区别。

favicon 功能刚推出时，IE 浏览器率先引入 rel="shortcut icon"，作为指定 favicon 的方式。当时这个属性不是 HTML 规范的一部分，而是 IE 的私有实现。但随着其他浏览器的普及，favicon 成为网页的标准功能，W3C（万维网联盟）在 HTML5 规范中引入了 rel="icon" 作为标准写法，所有主流浏览器（包括 Chrome、Firefox、Edge、Safari 等）均完全支持，已经逐渐取代 rel="shortcut icon"。

现代浏览器为了兼容旧版网页，仍然支持 rel="shortcut icon"，但实际解析时会将其视作 rel="icon" 处理。虽然两者功能相同，但 rel="shortcut icon" 是非标准写法，而且主要是针对旧版 IE6 及更早版本，这些版本几乎早就被淘汰，针对它们进行兼容性优化已无必要，我非常不推荐继续这样使用。

推荐规范写法

默认位置： 将 favicon.ico 文件放在网站根目录下

HTML 声明： 在 中添加：

<!-- 最推荐 favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- 次推荐 favicon -->
<link rel="icon" href="/favicon.ico">

<!-- 现代多格式图标 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple 设备支持 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA 支持 -->
<link rel="manifest" href="/site.webmanifest">

<!-- 主题颜色 -->
<meta name="theme-color" content="#ffffff">

HTML 标准建议属性顺序以 rel 开头，因为 rel 是 的核心属性，其次是 href 和 type，这是大多数现代网站和框架使用的主流属性写法顺序，符合常见规范。

但是不推荐 type、href、rel 顺序的写法，rel 应该放在最前面，HTML5 解析器可以正常处理，但不符合常见习惯，降低可读性。

是否必须指定 type 属性？

在 HTML5 规范中 link 标签的 type 属性是可选的，不必必须指定。如果省略 type，浏览器会根据 href 中引用的文件的扩展名（如 .ico、.png、.svg）自动推断图标的类型。虽然 type 是可选的，但明确指定 type 能提高代码可读性，尤其在团队协作或复杂项目中更显规范。

• 兼容性和规范性：指定 type 可以提高代码的可读性，表明你明确知道引用的文件类型。
• 潜在性能优化：某些旧版或特定浏览器可能在解析时会更高效，尤其是当文件扩展名不常见时（例如使用 .svg）。
• 避免意外错误：如果文件扩展名与内容类型不匹配（例如，扩展名为 .ico 但实际是 PNG 图像），指定正确的 type 可以确保浏览器正确处理图标。

缺省 type 属性浏览器会自动识别 .ico 文件为 image/x-icon。简洁，功能正常，适合快速开发或简单项目。如果你不需要考虑极端兼容性问题，这种写法也是不错的选择。常见文件格式对应的 type 值：

• .ico 对应 image/x-icon
• .png 对应 image/png
• .gif 对应 image/gif
• .svg 对应 image/svg+xml

type 属性不是必须的，省略时浏览器会自动推断类型。为了更好的兼容性和代码规范性，应该直接淘汰 shortcut icon 属性设置，而是直接采用 icon，常规的 .ico、.png、.gif 可以省略 type，而使用 .svg 这种非标准格式时就建议指定 type。

遵循这些规范可以确保您的网站在各种设备和浏览器上都能正确显示图标。