favicon 格式对比：ICO、PNG 与 SVG
三种格式，三种职责。用 .ico 应对 /favicon.ico 路径和老旧客户端，用 PNG 覆盖现代浏览器和所有应用图标尺寸，用 SVG 提供清晰、随主题切换的标签页图标。
每种格式担负不同职责
并不存在一种“最好”的 favicon 格式。每种格式都覆盖了其他格式做不到的场景。只选一种并到处硬套，正是标签页变空白、主屏幕显示灰色方块的原因。
.ico 格式是一个容器，能把多个尺寸装进一个文件。这一点很重要，因为浏览器和爬虫默认仍会请求 /favicon.ico，而老旧客户端只认 .ico。真正的 .ico 不是把扩展名改成 .ico 的 PNG。重命名文件只改了名字，没改字节，大多数客户端都会拒绝它。
PNG 是主力。每个现代浏览器都能读取它，每个应用图标和 manifest 位置（16、32、180、192、512）用的都是 PNG。SVG 是后起之秀：一个矢量文件，在任何尺寸下都保持清晰，还能用文件内部的 media query 在深色模式下切换颜色。
ICO、PNG 与 SVG 对比
| 格式 | 最适合 | 注意事项 |
|---|---|---|
| .ico | /favicon.ico 路径，以及只读取 .ico 的老旧浏览器或爬虫 | 必须是真正的多尺寸容器（16 + 32 + 48），不能是重命名的 PNG。不要用它做应用图标。 |
| PNG | 现代浏览器标签页，以及所有应用图标和 manifest 尺寸（16、32、180、192、512） | 是位图，所以每个尺寸都是单独的文件。你仍然需要所有尺寸，单个 PNG 覆盖不了全部。 |
| SVG | 一个可缩放到任意尺寸、能在深色模式下切换颜色的清晰标签页图标 | 在 /favicon.ico 上无效，iOS 或 Android 主屏幕也不使用。保持简单，特效在不同浏览器中的渲染可能不一致。 |
它们在 head 中如何协同
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">能读取 SVG 的浏览器使用 favicon.svg。其余情况回退到 PNG 和 .ico。apple-touch-icon 保持为 PNG，因为 iOS 在这里会忽略 SVG。
常见问题
我能直接把 PNG 重命名为 favicon.ico 吗？
不能。.ico 是它自己的容器格式，不是换了扩展名的 PNG。有些浏览器能容忍标注错误的文件，但很多浏览器不行，爬虫更严格。请生成一个真正的多尺寸 .ico。
已经有 PNG 和 SVG，还需要 favicon.ico 吗？
需要，保留一个。浏览器、订阅源阅读器和搜索爬虫在完全没有标签的情况下仍会请求 /favicon.ico。当你的 link 标签被漏掉时，该路径上的文件就是安全网。
SVG favicon 比 PNG 更好吗？
对标签页图标而言可以更好，因为一个文件在每种尺寸下都保持清晰，还能适配深色模式。它无法替代主屏幕用的 PNG 应用图标，所以两者都要用。
512x512 的 manifest 图标该用哪种格式？
PNG。manifest 的 icons 数组期望 192 和 512 的位图 PNG，其中包括一个 maskable。SVG 不是 Android 用于已安装应用图标的格式。