html - Safari favicon 错误地渲染为白色背景

问题描述

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

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

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

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

这遵循Apple 关于创建固定选项卡图标的开发人员指南。该指南规定图像文件应符合以下要求：

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 渲染不正确？

标签： htmlsafarimeta-tagsfavicon

解决方案

Safari Pinned Tab Favicon中的color属性不是控制背景，而是控制实际图标的颜色。这是意料之中的。link rel="mask-icon"

示例中，color属性设置图片的显示颜色

但是，正如您正确识别的那样，它取决于暗模式或亮模式。只有当我们使用深色模式时，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

一个可能的解决方案

假设在 Dark 模式下使用白色 Favicon，在 Bright 模式下使用黑色 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">'
        );
    }

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

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

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

有趣的事实：我在同一个问题上运行几乎与你相同的颜色#0075be 而且我也认为这足够对比，但似乎不是。

html - Safari favicon 错误地渲染为白色背景

问题描述

解决方案

推荐阅读