window.matchMedia() 无法直接切换 favicon，因为它仅监听媒体查询变化（如 (prefers-color-scheme: dark)），不操作 DOM 或资源加载；需手动修改 的 href 属性来实现切换。
为什么 window.matchMedia() 无法直接切换 Favicon
因为 matchMedia 只能监听媒体查询变化（比如 (prefers-color-scheme: dark)），它本身不操作 DOM 或资源加载。Favicon 是通过 标签声明的，要切换图标，必须手动替换该标签的 href 属性——matchMedia 只是触发这个动作的“开关”。
如何用 matchMedia 监听系统主题并更新
核心逻辑：先获取当前主题，再根据结果设置初始图标；然后监听变化，在回调里动态修改 的 href。注意必须确保页面中已存在一个带 id 或可唯一定位的 标签，否则脚本找不到目标。
常见做法如下：
- 在 HTML 中预先定义两个
标签（dark/light），用disabled控制显隐，但更轻量的方式是只留一个，动态改href - 使用
matchMedia("(prefers-color-scheme: dark)").matches获取初始值，避免闪屏 - 监听
change事件，而非轮询；回调中直接操作 DOM，无需重新创建 - 图标路径建议用绝对 URL 或根相对路径（如
/favicon-dark.ico），避免因当前 URL 路径导致 404
简短示例：
const favicon = document.querySelector('link[rel="icon"]');
if (!favicon) return;
const setFavicon = (isDark) => {
favicon.href = isDark
? '/favicon-dark.svg'
: '/favicon-light.svg';
};
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
setFavicon(mediaQuery.matches);
mediaQuery.addEventListener('change', e => setFavicon(e.matches));
为什么 SVG Favicon 比 ICO 更适合主题切换
ICO 文件格式不支持 CSS 变量或条件渲染，而现代浏览器（Chrome 92+、Firefox 95+、Safari 15.4+）已支持 SVG 作为 Favicon，且 SVG 可内联样式、响应 prefers-color-scheme 媒体查询——但仅限于 SVG 内部的 ，外部 JS 仍需配合 matchMedia 才能生效。
实际限制更现实：
- 即使用了 SVG，也不能指望浏览器自动按主题加载不同 SVG；
matchMedia仍是必需的触发机制 - 部分旧版 Safari 对 SVG Favicon 支持不稳定，建议 fallback 到 ICO（用
+组合） - SVG 图标需明确指定尺寸（如
width="32"）和 viewBox，否则可能渲染异常
容易被忽略的兼容性与缓存问题
用户切换系统主题后，新 Favicon 不显示，大概率不是 JS 逻辑问题，而是资源加载层面的坑：
- 浏览器对 Favicon 有强缓存策略，即使
href改了，也可能复用旧资源；解决方法是在 URL 后加版本参数，如/favicon-dark.svg?v=2 -
window.matchMedia在 Safari 中首次调用可能返回undefined或错误值，建议加空值判断：if (!mediaQuery || typeof mediaQuery.matches === 'undefined') return; - 服务端渲染（SSR）场景下，JS 还没执行时，页面已用默认图标渲染了一次；可在 HTML 模板中根据服务端检测到的主题预设
href，减少首次不一致 - 某些 PWA 环境下，manifest.json 中的
icons字段不会随 JS 切换自动更新，桌面快捷方式图标仍为初始值——这是设计限制，无法绕过
主题切换这件事，真正难的从来不是监听，而是让每个环节（HTML、JS、缓存、PWA）都对得上同一套状态。
