如何在浏览器隐身模式下可靠更换网站Favicon？

针对隐身模式下黑色标签栏导致Favicon辨识度低的问题，以下是几个无需依赖不可靠JS检测的可靠方案：

• 借助主题色元标签+媒体查询间接适配
  多数浏览器在隐身模式下会强制启用深色主题逻辑，即便系统处于浅色模式。你可以通过设置分模式的theme-color元标签，配合Favicon的媒体查询切换规则，让浏览器自动适配：

  <!-- 浅色模式主题色与对应Favicon -->
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <link rel="icon" href="/favicon-light.ico" media="(prefers-color-scheme: light)">
  
  <!-- 深色模式主题色与对应Favicon -->
  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
  <link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)">
  

  隐身模式下浏览器会自动触发深色模式的媒体查询规则，切换到适配黑色背景的Favicon，无需主动检测隐身状态。

• 使用带媒体查询的SVG格式Favicon
  SVG作为矢量格式，可直接在代码内嵌入CSS媒体查询，根据背景环境自动调整图标颜色：

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <style>
      .icon-path {
        fill: #000;
      }
      @media (prefers-color-scheme: dark) {
        .icon-path {
          fill: #fff;
        }
      }
    </style>
    <!-- 替换为你的图标路径 -->
    <path class="icon-path" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16z"/>
  </svg>
  

  将此SVG设为Favicon后，隐身模式的深色逻辑会自动触发颜色反转，保证图标在黑色标签栏上的辨识度，全程无需JS介入。

• 利用Safari的遮罩图标特性（补充方案）
  Safari支持mask-icon元标签，它会根据标签栏背景色自动调整图标的显示颜色：

  <link rel="mask-icon" href="/mask-icon.svg" color="#000000">
  

  当标签栏为黑色时，浏览器会自动将遮罩图标颜色反转为浅色，这个方案仅针对Safari，但可以作为跨浏览器适配的补充。

这些方案均基于浏览器自身的主题行为逻辑，而非依赖不稳定的隐身模式检测手段，可靠性和兼容性更有保障。

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