SVG Favicon在明暗模式切换时未自动刷新，此现象是否正常？

嘿，这个情况确实是预期行为哦！

浏览器对于传统静态favicon（比如.ico、png格式）本来就没有动态更新机制，而SVG格式的favicon虽然支持CSS媒体查询，但浏览器加载完成后，并不会主动监听prefers-color-scheme的变化来重新渲染它——简单说就是，浏览器不会“盯着”你的SVG favicon去实时更新样式。

而刷新页面时，浏览器会重新请求并解析整个SVG文件，这时会根据当前的配色方案应用对应的@media (prefers-color-scheme: dark)规则，所以能显示正确的图标。

如果想要实现不刷新页面也能自动切换favicon，可以用JavaScript手动监听配色方案的变化，然后触发favicon的更新。这里给你一个简单的实现方案：

1. 首先给页面中的favicon link标签设置一个ID，方便后续操作：

<link id="dynamic-favicon" rel="icon" type="image/svg+xml" href="/favicon.svg">

2. 添加一段监听配色方案变化的脚本：

// 创建媒体查询对象，监听明暗模式变化
const darkModeMatcher = window.matchMedia('(prefers-color-scheme: dark)');

// 定义更新favicon的函数
function updateFavicon() {
  const faviconElement = document.getElementById('dynamic-favicon');
  // 通过添加时间戳参数，强制浏览器重新加载SVG（避免缓存影响）
  faviconElement.href = `/favicon.svg?cache-bust=${Date.now()}`;
}

// 页面加载完成后先执行一次，确保初始显示正确
updateFavicon();

// 监听明暗模式变化，触发更新
darkModeMatcher.addEventListener('change', updateFavicon);

这个方法的原理是，当用户切换系统明暗模式时，JavaScript会捕捉到这个变化，然后强制浏览器重新请求SVG文件，此时SVG就会根据新的配色方案渲染对应的样式了。目前这个方案在Chrome、Firefox、Edge等主流浏览器中都能正常工作，你可以试试看~

内容的提问来源于stack exchange，提问作者Dennis