SVG Favicon：何时用它，以及你仍然需要的那个 ICO
一个 SVG 可以是你在现代浏览器上最清晰的 favicon，而且它能从单一文件为深色模式切换。它只是不能作为你唯一的图标，所以这里讲清楚它适用在哪里，又把什么留给了 .ico 和 PNG。
SVG favicon 擅长什么
favicon 会在各个位置以差异极大的尺寸绘制，而单一 SVG 就能从一个文件覆盖它们全部。它在任何显示屏上都保持清晰，因为它是矢量的，而非固定的像素网格，所以既没有模糊的放大，也没有需要保持同步的 16、32 和 48 像素单独导出。
它还有一个光栅图标无法企及的绝招：SVG 内部的一条 prefers-color-scheme 媒体查询，让同一个文件在操作系统切换到深色模式时自我重新着色，于是标识在深色标签栏上依然清晰易读，无需再交付第二张图片。
如何引用它，连同回退
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">理解 SVG 的浏览器会优先选择第一行。其余的都是为不理解它的那些位置准备的。
SVG 在哪里有效，在哪里无效
| 位置 | 使用 SVG 吗？ |
|---|---|
| 现代浏览器标签页 | 是的，而且在这里它看起来最好 |
| 较旧的浏览器 | 不，它们会回退到 .ico 或一个 PNG |
| /favicon.ico 路径 | 不，那个请求需要一个真正的 .ico |
| iOS 主屏幕 | 不，它使用 apple-touch-icon PNG |
| Android 和 PWA 安装 | 不，它从 manifest 读取 PNG 图标 |
让 SVG 适配深色模式
在 SVG 自己的样式里放一条 prefers-color-scheme 媒体查询，让它在操作系统主题变化时切换填充色。于是单个文件在浏览器的浅色和深色界面上都能正确显示，这是处理主题感知 favicon 最利落的方式。
如果你宁愿不维护那条媒体查询，一个对比度足以在任一背景上存活的中间色调标识，是通往同一目标的更简单路径。
常见问题
我应该用 SVG favicon 吗？
对于浏览器标签页，应该：它是单一文件，能完美缩放，还能适配深色模式。只要把它与一个 favicon.ico 和 PNG app icon 搭配，让那些不读取 SVG 的位置仍然被覆盖。
所有浏览器都支持 SVG favicon 吗？
大多数现代浏览器支持，但并非全部，而且没有任何主屏幕位置会使用它。这就是为什么你要保留一个 .ico 和 PNG 作为回退，而不是只依赖 SVG。
如果我有了 SVG，还需要 favicon.ico 吗？
需要。浏览器、爬虫和 feed 阅读器仍会按路径请求 /favicon.ico，而那个请求无法用 SVG 来回应。在网站根目录保留一个真正的 .ico。
SVG favicon 能做深色模式吗？
能，这是它的优势之一。SVG 内部的一条 prefers-color-scheme 媒体查询会在操作系统切换主题时为它重新着色，于是单个文件在浏览器的浅色和深色界面上都能工作。