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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的HTML相关文章