Safari的favicon在白色背景下渲染不正确。

Question

编辑：我发现这是由于黑暗模式，因为favicon和背景之间没有足够的对比度。 我发现这是由于黑暗模式，因为没有足够的对比favicon和背景之间。但是，还有没有办法禁用呢？我用图标做了一个模拟图像文件，对比度似乎足够了。

---

我正试图在一个网站上添加一个图标。HTML 网站。然而，在Safari中，favicon被错误地渲染为白色背景（见下图）。这是意料之外的，因为提供的文件是一个透明的 svg.

为了在safari中加入favicon，我使用了 mask-icon 链接属性来告诉Safari图标的位置。如果没有定义这个属性，Safari将使用默认的favicon在 icon 链接属性。然而，我的图标在Safari中并不能像这样很好地工作，所以用下面的代码为Safari单独定义了一个图标。

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2163d9">

下面的代码是 苹果关于创建钉钉标签图标的开发者指南. 准则规定，图像文件应符合以下要求。

• 100%黑色矢量
• 一层
• viewBox 颁授 0 0 16 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>

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

然而，favicon却正确地显示在MacOS触摸栏中（见下图）。

有谁知道为什么Safari的图标显示不正确？

Answer 1

的 color 属性中 link rel="mask-icon" 为Safari Pinned Tab Favicon，是 不 控制背景，但实际图标的颜色。这是我们所期望的.

在示例中，color属性设置了图像的显示颜色。

然而，正如你正确认识到的那样，它取决于黑暗或明亮模式。背景 只有当我们使用黑暗模式时才会添加到Safari的Favicons中。

这就可以解释了，其他博客也得出这个结论，在黑暗模式下，Safari会自动添加白色背景。

然而这不可能是事实。苹果、谷歌等很多网站，如果在黑暗模式下用Safari访问。勿 在(pinnedtab)Favicon中拥有白色背景。此外，他们中的许多人的对比度非常低。

我注意到在网上读到，Safari的Favicons应该是单色的SVG，我们在其中用 color 属性。我已经按照这个原则创建了一个Favicon，但是在黑暗模式下，我还是得到了白色的背景。

参考资料。https:/developer.apple.comdesignhuman-interface-guidelinesiosicons-and-imagesapp-icon。https:/makandracards.commakandra26757-不要使用透明的pngs-ios-favicons。

一个可能的解决方案

假设在黑暗模式下是白色的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">'
        );
    }

这个不会即时改变，需要cache claering推送给访客。

我继续研究，这个还是不够满意。

我想知道如果你在favicon图片周围加一个小小的（一个像素）白色边框会怎么样。这应该（对于分析它的计算机程序来说）就像一个非常高的对比度，从而避免了白色背景的添加，而且肉眼是看不到的。

有趣的是:我也遇到了同样的问题，颜色几乎和你一样。#0075be我也觉得这样的对比足够，但似乎还不够。