The color属性在link rel="mask-icon"对于 Safari 固定选项卡 Favicon，是not控制背景，但实际图标的颜色。这是预期的 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW1.
在示例中，颜色属性设置了显示颜色
图像
但是，正如您正确认识到的那样，它取决于黑暗或明亮模式。
白色的背景仅当我们使用深色模式时，才会添加到 Safari 中的 Favicons。
这可以解释这一点，其他博客也得出这样的结论，即在黑暗模式下，Safari 会自动添加白色背景。
但这不可能是事实。 Apple、Google 和许多其他网站，如果在深色模式下在 Safari 上访问，do not在（固定/选项卡）网站图标中具有白色背景。此外，其中许多对比度非常低。
我注意到在线阅读，Safari Favicons 应该是单色 SVG，我们使用以下命令定义（favicon）颜色color仅属性。我按照这个原则创建了一个网站图标，但我仍然在黑暗模式下得到白色背景。
参考：https://developer.apple.com/design/ human-interface-guidelines/ios/icons-and-images/app-icon 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 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我也认为这已经足够对比了，但似乎还不够。
