在Safari中实现明暗模式下显示不同的Favicon

嗨，我之前也踩过Safari这个坑！你提到的用media属性给不同配色方案指定不同favicon的方法，在Chrome、Firefox这些浏览器里确实能正常工作，但Safari对favicon的media支持一直不太友好——它基本会忽略这个属性，只会固定加载某一个link标签里的图标，完全不跟着系统明暗模式切换。

不过别担心，有两个靠谱的解决办法：

方法一：用SVG Favicon（最推荐） #

Safari支持SVG格式的favicon，而且SVG内部可以写响应式CSS，完美适配明暗模式。步骤很简单：

1. 先创建一个favicon.svg文件，内容示例如下：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <style>
    /* 浅色模式下的图标颜色 */
    .icon-shape {
      fill: #2d2d2d;
    }
    /* 深色模式下自动切换颜色 */
    @media (prefers-color-scheme: dark) {
      .icon-shape {
        fill: #f5f5f5;
      }
    }
  </style>
  <!-- 这里替换成你的图标路径，下面是个简单的示例形状 -->
  <path class="icon-shape" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2z"/>
</svg>

你可以把里面的.icon-shape对应的路径换成自己的图标形状，调整颜色到你需要的样式就行。

2. 然后在HTML里引用这个SVG：

<!doctype html>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<!-- 可选：添加PNG fallback，兼容不支持SVG favicon的旧浏览器 -->
<link rel="icon" href="test-1.png" type="image/png" media="(prefers-color-scheme: light)">
<link rel="icon" href="test-2.png" type="image/png" media="(prefers-color-scheme: dark)">

这个方法的好处是不用写JS，完全靠CSS自动响应，而且Safari能完美识别，切换模式时图标会自动跟着变。

方法二：用JavaScript动态切换（备选） #

如果你不想用SVG，也可以通过JS监听系统配色方案的变化，动态替换favicon的链接：

// 定义更新favicon的函数
function updateFavicon() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const faviconLink = document.querySelector('link[rel="icon"]') || document.createElement('link');
  faviconLink.rel = 'icon';
  faviconLink.href = isDarkMode ? 'test-2.png' : 'test-1.png';
  
  // 如果是新增的link标签，添加到head里
  if (!document.querySelector('link[rel="icon"]')) {
    document.head.appendChild(faviconLink);
  }
}

// 页面加载时先执行一次，确保初始图标正确
updateFavicon();
// 监听配色方案变化，实时更新
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateFavicon);

不过这个方法有个小缺点：Safari有时候会缓存favicon，可能需要强制刷新（Cmd+Shift+R）才能看到变化，所以优先推荐SVG的方法。

内容来源于stack exchange