暗色模式 Favicon（prefers-color-scheme）
暗色模式 favicon 会随操作系统的浅色或暗色设置而变化，好让它在深色或浅色的浏览器界面上都保持清晰。两种方法都可行：一张内含 prefers-color-scheme 媒体查询、能给自己重新上色的 SVG favicon，或者两张在其 link 标签上用 media="(prefers-color-scheme: dark)" 声明的 PNG 文件。最简单的替代方案，是用一个在两种模式下都读得清的中间色调图标。
让它响应的两种方式
更干净的做法是一张 SVG favicon，在它自己的样式里带一条 prefers-color-scheme 媒体查询，好让这单个文件在操作系统切换到暗色时给自己重新上色。会渲染 SVG favicon 并顾及该媒体查询的浏览器（包括 Safari 和 Firefox）无需额外标签就能捕捉到这个变化。
另一种做法是两张光栅文件：一张普通图标和一张为暗色优化的图标，各自的 link 标签携带一个 media 属性。按 media 切换 PNG favicon 的支持不如 SVG 路径一致，所以要始终保留一个能独立成立的默认图标。
两文件方案
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />朴素的 favicon.ico 是给一切忽略 media 属性的东西准备的后备。
暗色模式 favicon 常见问题
我怎么做一个暗色模式 favicon？
要么在一张 SVG favicon 里放一条 prefers-color-scheme 媒体查询让它给自己重新上色，要么声明两张 PNG，在它们的 link 标签上分别用 media="(prefers-color-scheme: dark)" 和 light。保留一个朴素的 favicon.ico 作为后备。
favicon 上的 media 属性到处都能用吗？
不能。按 prefers-color-scheme 切换 favicon 的支持在各浏览器之间并不一致，这就是为什么你要始终保留一个不论主题都能用的默认图标。
用 SVG 媒体查询还是两张 PNG？
SVG 路径只是一个文件，而且在主题切换上通常支持得更好。两张 PNG 给你每个主题的像素级控制，但依赖于不那么一致的 media 属性处理。