网站如何规范的调用favicon.ico和使用icon属性

网站的前端开发规范其实相对比较随意，在代码规范上难免各式各样的格式，子凡如今也是在不断的优化我们网站的书写规范，所以刻意的查阅了关于网站调用 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 及更早版本，这些版本几乎早就被淘汰，针对它们进行兼容性优化已无必要，子凡我非常不推荐继续这样使用。

推荐规范写法

1
2

最推荐：<link rel="icon" href="https://leixue.com/favicon.ico" type="image/x-icon">
次推荐：<link rel="icon" href="https://leixue.com/favicon.ico">

HTML 标准建议属性顺序以 rel 开头，因为 rel 是 <link> 的核心属性，其次是 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。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/favicon.html