是否可以为支持主题颜色的浏览器使用不同的图标？

Question

有没有办法通过元标记或 manifest.json 为支持主题颜色的浏览器设置不同的网站图标？我有一个黑色的主题栏，但在桌面浏览器上使用的主要是黑色的图标。我希望有一个用于移动浏览器的备用白色图标，但我不想假设移动浏览器 === 主题颜色支持，因为情况并非总是如此。

桌面图标示例：

移动网站图标示例：

Answer 1

可以通过prefers-color-scheme 媒体查询访问浏览器的主题。不幸的是，由于 favicon 不是页面元素，因此您不能使用 CSS 文件中的媒体查询来在两个图像之间切换。

解决办法是把prefers-color-scheme和SVG结合起来，可以嵌入CSS。声明一个 SVG favicon：

<link rel="icon" href="my_icon.svg">

并在 SVG 本身中使用媒体查询：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

来源tomoyac.com

SVG favicon 仍然是一项高级功能。已经支持by Firefox和by Chrome，但其他浏览器do not support it yet。