html – 触摸栏上的自定义Safari书签图标和颜色

Macbook Pro 13和15“笔记本电脑的键盘上有一个触控条(交互式显示屏).使用Safari时,所有书签都显示在Touch Bar上.有些网站(如Facebook)显示自定义背景颜色的自定义图标.触摸栏.我如何以网络开发人员的身份做到这一点？

我是否需要使用特殊的Favicon,或者使用特定图像格式的特殊HTML元标记(如og：image)？

触摸栏上的书签示例：

解决方法

一周后我找到了问题的答案.希望这有助于某人.

首先,您需要创建徽标的特殊矢量图像并将其上传到您的网站.矢量图像需要100％黑色并具有透明背景.然后你需要在你的网站上添加一个“mask-icon”元标记.您可以在此HTML标记中为图像设置颜色.此图像用于触摸条以及固定标签.

mask-icon 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