如何让网页图标适配用户的系统配色方案偏好？

网页通常通过 favicon.ico 或者各类 <link> 标签为浏览器提供图标，示例如下：

<link rel='icon' type='image/png' href='icon.png'>

当前存在的问题是，如果图标颜色与浏览器标签栏颜色一致，用户将无法看清图标，包括使用自定义主题的Chrome、Safari、Firefox浏览器都存在这类场景。

目前有几个较为容易想到的基础解决方案：

• 作为用户，可选择标签栏非纯白或纯黑的主题，同时祈祷站点图标颜色不会与主题撞色
• 作为开发者，可选择非纯白或纯黑的图标颜色，或是给图标添加外边框，同样祈祷不会与用户的主题撞色

但作为开发者，我们好奇是否存在方案可以告知浏览器，在深色标签栏时使用一套图标，浅色标签栏时使用另一套？例如通过SVG CSS、不同的<link>标签实现？

补充说明：我知道上文提到的主题比较花哨，我用“谷歌专属绿色”主题与其他主题区分不同账号，这样可以快速识别每个浏览器窗口对应的账号，我共有7个以上的配置文件，每个都有完全不同的独特主题 😉

可行的适配方案 #

目前已有两种成熟的落地方式可以实现favicon随浏览器主题深浅自动切换，覆盖绝大多数主流现代浏览器：

1. 多图标配合media属性声明
   直接在HTML头部为深浅主题分别声明对应的favicon资源，浏览器会自动匹配当前生效的主题加载对应图标：

<!-- 浅色主题下加载 -->
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<!-- 深色主题下加载 -->
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

2. 单SVG图标内置自适应逻辑
   使用SVG格式制作favicon，直接在SVG文件内部嵌入媒体查询规则，不需要多份文件就能自动适配不同主题：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
  <style>
    .icon-path {
      fill: #222;
    }
    @media (prefers-color-scheme: dark) {
      .icon-path {
        fill: #eee;
      }
    }
  </style>
  <path class="icon-path" d="M0 0h16v16H0z"/> <!-- 替换为实际图标路径 -->
</svg>

引入SVG favicon的代码如下，可额外增加PNG格式的favicon作为旧浏览器的降级方案：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">

内容的提问来源于stack exchange，提问作者user128511