如何为暗模式创建自定义响应式favicon？
近年来，暗模式的兴起使得许多网站的favicon在某些情况下感觉尴尬甚至无法看到。只要你有适当的资源，创建一个可以根据用户的颜色方案偏好自适应的响应式favicon相对容易。
要创建一个响应式favicon，你需要一个SVG图标，尽可能少的颜色以及两个颜色调色板，一个用于浅色模式，一个用于暗色模式。通常的图标清晰度和复杂度规则适用，所以确保你的图标符合所有必要的标准，在任何情况下都能被视觉上区分出来。在我们的示例中，我们将使用来自精美的Feather图标集的单色图标。
利用SVG图像中的嵌入样式和prefers-color-scheme媒体查询，我们可以创建一个适当的<g>元素来分组图标的所有元素。然后，使用组的id，我们可以为每个设计应用颜色调色板。以下是我们最终的SVG资源的样子：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style>
#icon {
stroke: #000;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
@media (prefers-color-scheme: dark) {
#icon {
stroke: #fff;
}
}
</style>
<g id="icon">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</g>
</svg>
创建SVG资源后，只需在页面的<head>元素中包含自定义的SVG favicon，然后你就可以开始了。如果可能的话，确保包含一个PNG回退，其中包含图标在任何调色板中的渲染版本：
<head>
<!-- 假设你有一个名为favicon.png的渲染PNG回退 -->
<link rel="icon" type="image/png" href="favicon.png" >
<!-- 假设SVG图标的名称为favicon.svg -->
<link rel="icon" type="image/svg" href="favicon.svg" >
</head>