Macbook Pro 13 和 15"笔记本电脑在键盘上有一个 Touch Bar(交互式显示)。使用 Safari 时，所有书签都显示在 Touch Bar 上。一些网站(如 Facebook)显示带有自定义背景的自定义图标Touch Bar 上的颜色。作为 Web 开发人员，我该如何做到这一点？
我是否需要使用特殊的 Favicon，或使用特定图像格式的特殊 HTML 元标记(如 og:image)？
Touch Bar 上的书签示例:
最佳答案
一周后我找到了问题的答案。希望这对某人有帮助。
首先，您需要创建 Logo 的特殊矢量图像并将其上传到您的网站。矢量图像需要 100% 黑色，背景透明。然后，您需要向您的网站添加一个“mask-icon”元标记。您可以在此 HTML 标记中为图像设置颜色。此图像用于触摸栏，也用于固定标签。
面具图标 HTML 标签:
<link rel="mask-icon" href="website_icon.svg" color="#121212">
查看 Apple 开发者文档: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html
关于html - Touch Bar 上的自定义 Safari 书签图标和颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40844731/