项目开发时，有可能会根据主题模式使用不同的 favicon，这里介绍一个小技巧：使用 SVG 来实现。
CSS 中可通过 prefers-color-scheme 查询使用的主题模式。
@media (prefers-color-scheme: dark) {
....
}
在 SVG 中使用 CSS 代码来改变内容：
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#Group {
fill: black;
}
@media (prefers-color-scheme: dark) {
#Group {
fill: #FFFFFF;
}
}
</style>
<title>ico</title>
<g id="logo-autograph-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(-0.000000, -0.000000)" fill="#FFFFFF">
...
</g>
</g>
</svg>
在 Head 中使用 SVG 即可：
<link rel="icon" href="favicon.svg" type="image/png" />
觉得有帮助的话，不妨考虑购买付费文章来支持我们 🙂 ：
付费文章