不能直接用 window.matchMedia 切换 favicon，必须手动更新 <link rel="icon"> 标签；需用 (prefers-color-scheme: dark) 监听系统主题变化，加时间戳破缓存并重置 rel 属性确保生效。
不能直接用 window.matchMedia 切换 favicon——它只负责监听系统主题变化，真正更新 favicon 必须手动操作 <link rel="icon"> 标签。
监听系统深色/浅色主题变化
window.matchMedia 是唯一能可靠捕获系统级主题变更的 API，比读取 localStorage 或 CSS 自定义属性更及时、更准确。它不依赖用户手动切换开关，而是响应操作系统或浏览器设置的真实变更。
- 必须使用
(prefers-color-scheme: dark)媒体查询，注意括号和空格不能省略 - 推荐在页面加载后立即检查一次当前匹配状态，避免首屏渲染时主题错位
- 监听回调中不要做复杂计算或 DOM 批量操作，favicon 切换本身应控制在 10ms 内完成
动态替换 favicon 的正确写法
浏览器对 favicon 的缓存非常激进，直接改 <link> 的 href 属性可能无效，必须强制“破缓存”并确保 DOM 更新生效。
- 给 favicon URL 加时间戳参数（如
?v=1712345678）或哈希值，避免服务端或浏览器缓存旧图标 - 必须先修改
href，再触发一次rel属性的重新赋值（例如从"icon"改成"icon"），某些浏览器需要这个 trick 才重载 - 推荐使用
document.querySelector('link[rel="icon"]')获取目标元素，避免硬编码索引（document.head.children[0]不可靠）
完整可运行示例（含 fallback）
const favicon = document.querySelector('link[rel="icon"]');<br>if (!favicon) return;<br><br>const updateFavicon = (isDark) => {<br> const ts = Date.now();<br> const path = isDark<br> ? '/favicon-dark.ico?v=' + ts<br> : '/favicon-light.ico?v=' + ts;<br> favicon.href = path;<br> // 强制重载：重设 rel 触发浏览器刷新图标<br> favicon.rel = 'icon';<br>};<br><br>// 初始化<br>const mql = window.matchMedia('(prefers-color-scheme: dark)');<br>updateFavicon(mql.matches);<br><br>// 监听变更<br>mql.addEventListener('change', (e) => {<br> updateFavicon(e.matches);<br>});
注意：如果项目用 Webpack/Vite，确保 /favicon-dark.ico 和 /favicon-light.ico 已正确放入 public/ 目录，且路径大小写与代码严格一致——Windows 开发机上不报错，但部署到 Linux 服务器会 404。
容易被忽略的兼容性细节
部分老版本 Safari（≤14.1）和 Firefox（≤95）不支持 matchMedia 的 change 事件，仅能靠定时轮询补救；但现代项目通常无需降级处理。
- 不要监听
prefers-reduced-motion或其他媒体查询来顺带改 favicon，职责要单一 - 如果页面同时支持手动主题切换（如用户点击“深色模式”按钮），需合并逻辑：把
matchMedia监听和用户操作都导向同一个updateFavicon()函数 - Android Chrome 在 PWA 添加到主屏幕后，首次启动仍可能沿用旧 favicon，需冷启动一次才能生效——这不是代码问题，是系统行为
favicon 是极小资源，但切换逻辑一旦出错，用户第一眼看到的就是“主题没变过来”，这种感知偏差比样式错乱更伤信任。重点不在代码多短，而在每次 href 赋值后是否真被浏览器采纳了。
