window.matchMedia监听器不触发favicon更新，因其仅通知深色模式状态变化，不自动重载静态声明的favicon；需手动更新link元素href并强制重解析。
为什么 window.matchMedia 的监听器不会触发 favicon 更新？
因为 matchMedia 监听器本身只负责通知你深色模式状态变化，它不关心 DOM、<link rel="icon"> 或任何资源加载逻辑。favicon 是静态声明在 HTML 中的，浏览器不会自动根据媒体查询重载它——你必须手动替换 <link> 的 href 属性，再强制浏览器重新解析该标签。
如何用 matchMedia + document.querySelector 动态切换 favicon？
核心是两步：先查到当前 favicon <link> 元素，再根据 matches 结果更新其 href。注意路径需为绝对 URL（相对路径在动态更新时容易 404），且建议预加载深色/浅色图标避免闪烁。
- 确保 HTML 中有明确的 favicon link，带
id最稳妥：<link id="dynamic-favicon" rel="icon" href="/favicon-light.svg">
- 监听
(prefers-color-scheme: dark)，并在回调中更新href：const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');<br>const favicon = document.querySelector('#dynamic-favicon');<br><br>function updateFavicon() {<br> const darkHref = '/favicon-dark.svg';<br> const lightHref = '/favicon-light.svg';<br> favicon.href = mediaQuery.matches ? darkHref : lightHref;<br>}<br><br>mediaQuery.addEventListener('change', updateFavicon);<br>updateFavicon(); // 立即执行一次，覆盖初始状态 - SVG favicon 需支持透明背景和系统色适配；若用 PNG，确保两个尺寸（16×16 / 32×32）都提供，否则部分浏览器会 fallback 到旧图标
常见错误：图标没变或报 404 是哪几个坑？
不是监听没生效，而是路径、缓存或格式出了问题。
-
href用了相对路径（如'./favicon-dark.svg'）：动态设置时基准 URL 可能变成当前页面 URL，导致路径错乱 → 改用以/开头的绝对路径或完整 URL - 服务端没开启 SVG MIME 类型（
image/svg+xml）：Chrome/Firefox 会静默拒绝加载 → 检查响应头Content-Type - 图标被强缓存（
Cache-Control: immutable）：即使href改了，浏览器仍用旧资源 → 在开发期加版本参数：'/favicon-dark.svg?v=2'，上线后配合 cache busting 策略 - 未处理 Safari 15.4+ 的限制：它不支持通过 JS 修改
<link rel="icon">的href来触发刷新 → 必须移除旧节点并插入新节点：favicon.remove();<br>const newLink = document.createElement('link');<br>newLink.rel = 'icon';<br>newLink.href = newHref;<br>document.head.appendChild(newLink);
要不要监听 DOMContentLoaded 再初始化？
要，但不是为了等 DOM 加载完才监听 mediaQuery，而是为了确保 favicon <link> 元素已存在。如果 favicon 标签在 JS 执行时尚未解析，querySelector 会返回 null。
- 最稳妥写法是把初始化逻辑包在
DOMContentLoaded回调里，或使用defer属性让 script 在 DOM 解析后执行 - 不要依赖
window.onload：它等所有资源（含图片、iframe）加载完，太晚，用户可能已看到错误图标 - 如果项目用构建工具（Vite/Webpack），确保 favicon 路径经 asset 处理，避免硬编码路径失效
