ICO 与 PNG Favicon：你该用哪种格式？
把 PNG 作为你的主要 favicon，同时在站点根目录保留一个 favicon.ico 作为后备。PNG 给你完整的 24 位色和真正的 alpha 通道，压缩更好，而且当前每一款浏览器都能通过 link 标签接受它；ICO 剩下的优势是它能把多个尺寸打包进一个文件，并且是在没有标签时客户端从 /favicon.ico 请求到的东西。同时发布两者只多花一个文件，却彻底消除了取舍。
两种格式
ICO 是 Windows 的图标容器，它成为 favicon 格式纯属偶然：Internet Explorer 请求 /favicon.ico，于是所有人都发布了一个。它的决定性特征是，单个 .ico 文件能同时容纳多个不同尺寸的位图，由使用方从中挑选一个。
PNG 是一种普通的 Web 图像格式，带无损压缩和完整的 alpha 通道。它只容纳一个尺寸的一张图像，所以要覆盖多个尺寸就意味着多个文件和多个 link 标签——而这恰恰是现代浏览器本来就期望的方式。
该选哪一个
ICO
后备与裸路径请求
- 一个文件同时携带 16、32 和 48 像素的位图
- 会被浏览器、爬虫和订阅阅读器从 /favicon.ico 请求，中间不涉及任何 link 标签
- 所有历史上发布过的浏览器都能理解，包括非常老的版本
- Windows 桌面快捷方式的原生格式
- 编写和查看都很别扭；大多数工具把它当作构建产物
PNG
Start here你的主要 favicon
- 24 位色，因此渐变和照片式标志都能保留
- 完整的 alpha 通道，因此边缘能在任意标签页颜色上干净地抗锯齿
- 在同等质量下比等价的 ICO 更小
- 所有当前浏览器都通过 link rel="icon" 支持
- Android 和 PWA manifest 期望用于安装图标的格式
技术对比
| 特性 | ICO | PNG |
|---|---|---|
| Colour depth | 经典文件里是 8 位调色板；现代文件里是 32 位 | 24 位色加 8 位 alpha |
| Transparency | 经典文件里是 1 位遮罩；32 位条目里是 alpha 通道 | 完整 alpha 通道 |
| Sizes per file | 多个，通常是 16、32 和 48 | 一个 |
| Compression | 未压缩位图，或经 PNG 压缩的条目 | 无损 DEFLATE |
| Requested without a link tag | 是，在 /favicon.ico | 否 |
该往 head 里放什么
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">同时声明两者并不冲突。浏览器会读取每一个 icon link，按 type 和 size 匹配，只有在它更偏好 ICO 或 PNG 加载失败时才使用 ICO。
ICO 对比 PNG 常见问题
我能完全弃用 favicon.ico 吗？
可以，只要你的 PNG link 标签存在，现代浏览器就没问题。会出问题的是一切按路径请求 /favicon.ico 却不解析你 HTML 的东西（爬虫、订阅阅读器、链接预览机器人、某些分析工具），它们会记录一个 404 并且什么都不显示。
如果我两者都声明，哪个会胜出？
由浏览器决定，依据是每个 link 上的 type 和 sizes 属性。实际操作中，当前浏览器会选择最贴合它所需尺寸的 PNG，只有在没有其他匹配时才回退到 ICO。
ICO 的质量比 PNG 差吗？
并非天生如此。一个 32 位的 ICO 条目携带与 PNG 相同的色彩和 alpha，而且许多 ICO 文件干脆内嵌了 PNG 数据。质量方面的抱怨来自那些带 1 位透明度的老式 8 位调色板 ICO，它们会产生生硬的锯齿边缘。