【发布时间】：2016-11-28 12:47:21
【问题描述】：
Macbook Pro 13 和 15" 笔记本电脑的键盘上有一个 Touch Bar（交互式显示屏）。使用 Safari 时，所有书签都显示在 Touch Bar 上。一些网站（如 Facebook）显示带有自定义背景的自定义图标Touch Bar 上的颜色。作为 Web 开发人员，我该怎么做？
我需要使用特殊的 Favicon，还是使用特定图像格式的特殊 HTML 元标记（如 og:image）？
【问题讨论】：
【发布时间】：2016-11-28 12:47:21
【问题描述】：
一周后我找到了问题的答案。希望这对某人有所帮助。
首先，您需要创建徽标的特殊矢量图像并将其上传到您的网站。矢量图像需要为 100% 黑色且具有透明背景。然后您需要向您的网站添加一个“掩码图标”元标记。您可以在此 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
【讨论】：
-
所以黑色部分变成白色，透明部分与指定的
color对吧？ -
“重要提示：SVG文件必须是单层，
viewBox属性必须设置为"0 0 16 16"。”