Firefox 112.0忽略prefers-color-scheme媒体标签问题求助

问题重现 #

你的代码在Chrome/Edge中能根据系统配色切换favicon，但Firefox 112.0会忽略media属性，始终加载最后一个<link rel="icon">标签：

<!DOCTYPE html>
<html>
    <head>
    <link rel="icon" type="image/x-icon" href="file:///C:/Users/daj/Desktop/favicon-dark.ico" media="(prefers-color-scheme: dark)">
        <link rel="icon" type="image/x-icon" href="file:///C:/Users/daj/Desktop/favicon-light.ico" media="(prefers-color-scheme: light)">
    </head>
    <body>
        Hello World
    </body>
</html>

原因分析 #

Firefox 112及更早版本对多<link rel="icon">标签的media属性支持不完善，不会根据媒体查询筛选加载对应的favicon，而是直接选取最后一个匹配rel="icon"的资源。

解决方案 #

方案1：使用SVG格式的favicon（推荐）

SVG支持内部嵌入媒体查询，能直接适配深色/浅色模式，Firefox对这种方式的支持更可靠：

创建favicon.svg文件，内容如下（可根据图标需求修改图形）：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <style>
    /* 深色模式下的图标样式 */
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
    /* 浅色模式下的图标样式 */
    @media (prefers-color-scheme: light) {
      .icon { fill: #000000; }
    }
  </style>
  <!-- 示例圆形图标，替换成你自己的图标路径 -->
  <circle class="icon" cx="16" cy="16" r="14" stroke="none"/>
</svg>

在HTML中引用该SVG：

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

方案2：JavaScript动态切换

通过监听系统配色变化，手动更新favicon的href属性，兼容性覆盖所有现代浏览器：

<!DOCTYPE html>
<html>
    <head>
        <link id="site-favicon" rel="icon" type="image/x-icon" href="file:///C:/Users/daj/Desktop/favicon-light.ico">
    </head>
    <body>
        Hello World
        <script>
            function switchFavicon() {
                const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
                const faviconEl = document.getElementById('site-favicon');
                faviconEl.href = isDarkMode 
                    ? 'file:///C:/Users/daj/Desktop/favicon-dark.ico' 
                    : 'file:///C:/Users/daj/Desktop/favicon-light.ico';
            }

            // 页面加载时初始化
            switchFavicon();
            // 监听配色模式变化
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchFavicon);
        </script>
    </body>
</html>

说明 #

方案1无需额外脚本，更简洁；方案2兼容性更强，适合需要保留ICO格式图标的场景。两种方法都能解决Firefox 112.0的favicon切换问题。

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