Html Safari favicon使用白色背景进行错误渲染

编辑：我发现这是由于暗模式造成的，因为法维康和背景之间没有足够的对比度。但是，是否仍有办法禁用此功能？我制作了一个带有图标的模拟图像文件，对比度似乎足够了

---

我正在尝试将favicon添加到

HTML

网站。但是，在Safari中，favicon被错误地渲染为白色背景（参见下图）。这是意外的，因为提供的文件是透明的

svg

为了将favicon包含到safari中，我使用

mask icon

link属性告诉safari favicon位于何处。如果未定义此选项，Safari将使用

图标中的默认favicon

链接属性。但是，我的图标在Safari中无法正常工作，因此使用下面的代码为Safari定义了一个单独的图标

接下来是。指南规定图像文件应符合以下要求：

• 100%黑色矢量
• 一层

• viewBox

  0的属性16

这是

SVG

文件

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <defs>
        <style>.a{clip-path:url(#b);}</style>
        <clipPath id="b">
            <rect width="16" height="16"/>
        </clipPath>
    </defs>
    <g id="a" class="a">
        <g transform="translate(-254 -191.5)">
            <path d="M299.962-203.031l-3.973-2.485L299.962-208Z" transform="translate(-31.961 405.016)"/>
            <path d="M-42.6-75.784l5.539,2.769,6-3.985-4.8-3Z" transform="translate(299.062 280.016)"/>
            <path d="M-82-313l6-3,5.625,4.219L-82-304.515Z" transform="translate(338 508)"/>
        </g>
    </g>
</svg>

.a{剪辑路径：url（#b）；}

但是，这仍然会导致favicon的渲染不正确。我已经清除了该网站的缓存，并在完全不同的主机上进行了尝试，但问题仍然存在

但是，favicon会正确显示在MacOS触摸栏中（参见下图）

有人知道为什么Safari favicon的渲染不正确吗

---

对于Safari固定标签Favicon，

link rel=“mask icon”

中的

color

属性不是控制背景，而是实际图标的颜色。

在本例中，“颜色”属性用于设置图形的显示颜色 形象

但是，正如您正确认识到的，它取决于暗模式或亮模式。 当我们使用暗模式时，白色背景只会添加到Safari中的Favicons中

这可以解释为什么其他博客也得出这样的结论，在黑暗模式下，Safari会自动添加白色背景

但这不可能是事实。苹果、谷歌和许多其他网站，如果在黑暗模式下在Safari上访问，在（钉住/标签）Favicon中不会有白色背景。此外，它们中的许多具有非常低的对比度

我注意到在网上阅读时，Safari favicon应该是单色SVG，我们只使用

color

属性定义（favicon）颜色。我已经按照这个原理创建了一个Favicon，但仍然在黑暗模式下得到了白色背景

参考资料：

可能的解决方案

假设暗模式下为白色，亮模式下为黑色

if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
        console.log('dark');
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v=your_dark_mode_fav" color="white">'
        );
    }
    else {
        document.head.insertAdjacentHTML(
            'beforeend',
            '<link rel="mask-icon" href="/safari-pinned-tab.svg?v= your_bright_mode_fav" color="black">'
        );
    }

if（window.matchMedia（'（首选颜色方案：深色））.matches==true）{
console.log（'dark'）；
document.head.insertAdjacentHTML(
"之前",，
''
);
}
否则{
document.head.insertAdjacentHTML(
"之前",，
''
);
}

这不会动态更改，需要将缓存clearing推送到访问者

我会继续研究，这还不够令人满意

我想知道如果你在favicon图像周围加上一个小小的（一个像素）白色边框会发生什么。这应该（对于分析它的计算机程序来说）像一个非常高的对比度，因此避免添加白色背景，而且它对裸眼是看不见的

有趣的事实： 我在同一期杂志上发表了与您几乎相同的颜色

#0075be

---

我也认为对比度已经足够了，但似乎还不够。

我在自己的网站（）上遇到了同样的问题，并通过稍微增加普通favicon的亮度和相应地更改遮罩图标的颜色来解决。（颜色是#1C806C，现在是#218D78。）这使得白色背景消失了，所以很明显，问题在于对比度，尽管我对浏览器如何确定合适的对比度感到困惑

---

Safari 14似乎不需要遮罩图标。它覆盖了普通的favicon，但当我从站点中删除它时，它只使用favicon，这看起来很好。一开始我甚至没有注意到区别，因为我的普通favicon也只使用两种颜色。

这可能有帮助，也可能没有，这证明苹果没有黑暗模式的能力，仅此而已。但我看到的大多数图标。。。好吧，即使在Safari上也没有任何背景。这看起来确实是一个基于对比度的自动操作，但为了避免它，还不清楚对比度必须是什么。