如何为支持theme-color的浏览器设置不同的favicon？

直接说结论：没有原生的meta标签或manifest.json机制能直接实现这个需求——因为标准里并没有把favicon的切换和theme-color的支持状态绑定起来。不过我们可以用一些前端技巧来达成你的目标，完全不需要默认判定移动端浏览器就支持theme-color，而是精准检测浏览器的特性支持情况。

下面是两种靠谱的实现方案：

方案一：JavaScript特性检测+动态切换favicon #

这是最精准的方法，不管是桌面还是移动浏览器，只要它支持theme-color，就自动切换到白色favicon，否则保留黑色版本。

实现步骤： #

1. 先写一个检测函数，判断浏览器是否支持theme-color：

function supportsThemeColor() {
  // 创建一个临时的theme-color meta标签
  const tempMeta = document.createElement('meta');
  tempMeta.name = 'theme-color';
  tempMeta.content = '#000000';
  document.head.appendChild(tempMeta);
  
  // 用matchMedia检测浏览器是否识别这个theme-color
  const isSupported = window.matchMedia('(theme-color: #000000)').matches;
  
  // 移除临时标签
  document.head.removeChild(tempMeta);
  return isSupported;
}

2. 然后根据检测结果动态切换favicon：

// 获取页面中已有的favicon标签，没有的话就创建一个
const faviconLink = document.querySelector('link[rel="icon"]') || document.createElement('link');
faviconLink.rel = 'icon';

if (supportsThemeColor()) {
  // 支持theme-color，设置白色favicon
  faviconLink.href = '/path/to/white-favicon.ico'; // 替换成你的白色图标路径
} else {
  // 不支持，设置默认黑色favicon
  faviconLink.href = '/path/to/black-favicon.ico'; // 替换成你的黑色图标路径
}

// 将标签添加到页面头部
document.head.appendChild(faviconLink);

把这段代码放在页面的</body>之前，或者用DOMContentLoaded事件包裹，确保DOM加载完成后再执行。

方案二：用SVG favicon+CSS媒体查询 #

如果你的浏览器目标群体都是现代浏览器（支持SVG favicon），可以用这种更简洁的方式：创建一个SVG格式的favicon，通过CSS媒体查询响应theme-color的设置，自动切换图标颜色。

实现步骤： #

1. 创建一个SVG图标（比如命名为dynamic-favicon.svg）：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <style>
    /* 默认显示黑色，对应不支持theme-color的浏览器 */
    .icon-path {
      fill: #000;
    }
    /* 当浏览器支持theme-color且当前主题色为你的纯黑色时，切换为白色 */
    @media (theme-color: #000000) {
      .icon-path {
        fill: #ffffff;
      }
    }
  </style>
  <!-- 这里替换成你的图标路径，下面是一个示例的"加号"图标 -->
  <path class="icon-path" d="M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0zm0 29C8.83 29 3 23.17 3 16S8.83 3 16 3s13 5.83 13 13-5.83 13-13 13zm-5-11h3v-3h4v3h3v-4h-3V8h-4v4h-3v4z"/>
</svg>

2. 在HTML中引用这个SVG作为favicon，同时保留ICO格式的 fallback 兼容旧浏览器：

<!-- 现代浏览器用SVG -->
<link rel="icon" type="image/svg+xml" href="/path/to/dynamic-favicon.svg">
<!-- 旧浏览器 fallback 到黑色ICO -->
<link rel="icon" type="image/x-icon" href="/path/to/black-favicon.ico">

关于manifest.json的补充说明 #

manifest.json里的icons字段是为PWA应用提供固定的图标集合，它是静态配置的，没有条件判断的能力，所以没法根据theme-color的支持情况切换图标，只能作为全局的PWA图标使用。

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