求助：根据系统明暗模式动态切换Favicon的代码不生效，如何修复？

我跟着教程做了根据系统明暗模式自动切换网站Favicon的设置，代码都放在<head>标签里，但不管怎么试，要么切换不生效，连Favicon都完全不显示了。

我一开始用的代码是这样的：

<!-- Default favicon (for browsers that don't support media queries in link tags) -->
<link rel="icon" href="favicon-white.png" type="image/x-icon">

<!-- Light mode favicon -->
<link rel="icon" href="favicon-black.png" type="image/x-icon" media="(prefers-color-scheme: light)">

<!-- Dark mode favicon -->
<link rel="icon" href="favicon-white.png" type="image/x-icon" media="(prefers-color-scheme: dark)">

后来我又重新试了一遍完全相同的代码，还是没渲染出任何图标，而且Favicon的图片文件和我的HTML文件确实在同一个文件夹里，路径应该没问题。有没有人能告诉我该怎么修复这个问题？

针对这个问题的解决方案： #

1. 先排查最常见的「缓存坑」

浏览器对Favicon的缓存特别顽固，哪怕你改了代码，它可能还在显示旧的缓存内容。先试试：

• 用强制刷新（Windows按Ctrl+F5，Mac按Cmd+Shift+R）重新加载页面
• 打开浏览器的隐私/无痕模式测试，看Favicon是否正常显示

2. 优化HTML代码的兼容性

有些浏览器对link[rel=icon]的media属性支持有细节要求，同时可以调整rel属性和MIME类型来提升兼容性：

<head>
  <!-- 亮色模式图标 -->
  <link rel="icon" href="favicon-black.png" type="image/png" media="(prefers-color-scheme: light)">
  
  <!-- 暗色模式图标 -->
  <link rel="icon" href="favicon-white.png" type="image/png" media="(prefers-color-scheme: dark)">
  
  <!-- 兼容旧浏览器的默认图标（放在最后，让媒体查询的规则优先覆盖） -->
  <link rel="icon shortcut" href="favicon-white.png" type="image/png">
</head>

这里做了几个关键调整：

• 给rel加上shortcut，兼容一些旧版浏览器
• 把type="image/x-icon"改成type="image/png"（如果你的图标是PNG格式的话，更准确的MIME类型能避免识别问题）
• 调整顺序，让媒体查询的规则优先于默认规则生效

3. 用JavaScript实现更兼容的切换方案

如果纯HTML的方式还是不行，用JavaScript监听系统主题变化来手动切换Favicon，兼容性更好，几乎所有现代浏览器都支持：

// 切换Favicon的核心函数
function switchFavicon(isDark) {
  // 查找页面中已有的Favicon标签
  let favicon = document.querySelector('link[rel="icon"]');
  // 若不存在则创建新标签
  if (!favicon) {
    favicon = document.createElement('link');
    favicon.rel = 'icon';
    document.head.appendChild(favicon);
  }
  // 根据主题设置对应图标
  favicon.href = isDark ? 'favicon-white.png' : 'favicon-black.png';
  favicon.type = 'image/png';
}

// 页面加载完成后初始化图标
document.addEventListener('DOMContentLoaded', () => {
  if (window.matchMedia) {
    // 匹配当前系统主题
    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
    switchFavicon(darkModeQuery.matches);
    
    // 监听主题变化事件，实时切换
    darkModeQuery.addEventListener('change', (e) => {
      switchFavicon(e.matches);
    });
  }
});

把这段代码放在</body>标签之前即可，确保页面DOM加载完成后再执行。

4. 最后检查文件本身

• 确认Favicon文件名的大小写完全正确（比如Favicon-White.png和favicon-white.png在Mac/Linux系统里是两个不同的文件）
• 打开浏览器开发者工具（按F12）的「Network」面板，刷新页面，查看Favicon文件的请求状态，如果是404，说明路径还是有问题

备注：内容来源于stack exchange，提问作者RaskAttack