html - Safari 图标错误地呈现为白色背景

Question

编辑:我发现这是由于暗模式造成的，因为图标和背景之间没有足够的对比度。但是，还有办法禁用它吗？我用图标制作了一个模拟图像文件，对比度似乎就足够了。

我正在尝试向 HTML 添加收藏夹图标网站。但是，在 Safari 中，图标被错误地渲染为白色背景(见下图)。这是出乎意料的，因为提供的文件是透明的 svg .

要将 favicon 包含到 safari 中，我使用了 mask-icon link 属性告诉 Safari 图标所在的位置。如果未定义，Safari 将使用 icon 中的默认图标。链接属性。但是，我的图标在 Safari 中不能像这样很好地工作，因此使用下面的代码为 Safari 定义了一个单独的图标。

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

以下是 Apple's developer guidelines on creating pinned tab icons .该指南指出，图像文件应符合以下要求:

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>

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

然而，图标在 MacOS 触摸栏中正确显示(见下图)。

有谁知道为什么 Safari favicon 渲染不正确？

Answer 1

color link rel="mask-icon" 中的属性Safari Pinned Tab Favicon 是 不是 控制背景，但实际图标的颜色。
This is expected .

In the example, the color attribute sets the display color of the image

但是，正如您正确识别的那样，它取决于暗模式或亮模式。
白色 背景仅当我们使用暗模式时才会添加到 Safari 中的 Favicon。

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

然而这不可能是事实。 Apple、Google 和许多其他网站，如果在深色模式下在 Safari 上访问， 不要在(固定/标签)Favicon 中有那个白色背景。此外，其中许多具有非常低的对比度。

我注意到在线阅读，Safari Favicon 应该是单色 SVG，我们用 color 定义(favicon)颜色。属性而已。我已经按照这个原则创建了一个 Favicon，但仍然在黑暗模式下获得白色背景。

引用:
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon
https://makandracards.com/makandra/26757-do-not-use-transparent-pngs-for-ios-favicons

一个可能的解决方案

假设暗模式下的网站图标为白色，亮模式下的网站图标为黑色。

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">'
        );
    }

这不会即时更改，需要将缓存清除推送给访问者。

我会继续研究，这仍然不够令人满意。

我想知道如果在网站图标图像周围放置一个很小的(一个像素)白色边框会发生什么。这应该(对于分析它的计算机程序)就像一个非常高的对比度，因此避免添加白色背景，并且它对裸眼是不可见的。

有趣的事实:
我遇到了与您几乎相同颜色的相同问题 #0075be而且我也认为这已经足够对比了，但似乎不是。