如何用 window.matchMedia 根据用户系统偏好自动切换网页 Favicon
作者：袖梨
2026-07-19
可通过监听 prefers-color-scheme 并动态替换 <link rel="icon"> 的 href 实现 Favicon 主题切换：需准备 favicon-light.png 和 favicon-dark.png 两套图标，首次加载及主题变更时调用 updateFavicon() 更新链接，注意 Safari 兼容性及 PWA 场景下需配置 manifest.json。
不能直接通过 window.matchMedia 切换 Favicon，因为 Favicon 是 HTML 文档的静态资源链接，不支持媒体查询响应式切换。但可以结合 window.matchMedia 监听系统主题变化，并在 JavaScript 中动态替换 <link rel="icon"> 的 href 属性，实现「自动切换」效果。
确认 Favicon 支持深色/浅色两套资源
提前准备两份不同主题适配的图标文件（推荐使用 PNG 格式，兼容性好）：
-
favicon-light.png：浅色背景下的图标（如深色图形） -
favicon-dark.png：深色背景下的图标（如浅色图形或带描边）
确保它们尺寸一致（建议 32×32 或 48×48），并放在网站根目录或静态资源路径下。
用 matchMedia 监听系统主题变化
监听 (prefers-color-scheme: dark) 媒体查询状态，获取用户当前系统偏好：
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
首次加载时立即应用匹配的图标，之后在主题切换时触发更新：
- 调用
darkModeMediaQuery.matches获取初始值 - 用
darkModeMediaQuery.addEventListener('change', handler)订阅变化
动态替换 <link rel="icon"> 的 href
找到页面中现有的 icon link 元素（通常在 <head> 中），修改其 href 属性：
- 若没有现成的
<link rel="icon">，需先创建并插入 - 推荐统一用
rel="icon"+type="image/png"，避免浏览器 fallback 行为干扰 - 路径使用绝对 URL 或相对于站点根目录的路径（如
/favicon-dark.png）
示例逻辑：
function updateFavicon(isDark) { const link = document.querySelector("link[rel='icon']"); if (!link) return; link.href = isDark ? '/favicon-dark.png' : '/favicon-light.png';}// 初始化updateFavicon(darkModeMediaQuery.matches);// 监听变化darkModeMediaQuery.addEventListener('change', e => { updateFavicon(e.matches);});
补充说明与注意事项
部分浏览器（如 Safari）对动态更换 favicon 支持不稳定，可能需要强制重载 link 节点才能生效：
- 可尝试移除旧节点再插入新节点，而非仅改
href - 移动端 PWA 添加到主屏幕后，图标由 manifest.json 决定，JS 动态切换无效 —— 需在
manifest.json中同时提供icons数组并标注purpose: "any maskable"，配合系统自动选择 - 不要依赖 favicon 切换作为核心功能提示，它属于增强体验，应有降级方案
不复杂但容易忽略细节。
