触摸栏上的自定义Safari书签图标和颜色 [英] Custom Safari bookmark icon and color on Touch Bar

问题描述

Macbook Pro 13和15笔记本电脑在键盘上有一个Touch Bar（交互式显示屏），使用Safari时，所有书签都显示在Touch Bar上，有些网站（如Facebook）显示带有自定义背景的自定义图标我需要使用一个特殊的Favicon，或者使用特殊的HTML元标记（比如og） ：image）以特定图片格式？

触摸栏上的书签示例：

解决方案

我已经在一周后找到了我的问题的答案，希望这可以帮助别人。

首先，您需要创建一个特殊的徽标矢量图并上传到您的网站，矢量图必须是100％黑色，透明背景，然后您需要添加一个蒙版图标元标签到您的网站。你可以设置这个HTML标签中的图片颜色。此图片用于触摸栏和固定选项卡。

掩码图标HTML标记：

 < link rel =mask-iconhref =website_icon.svgcolor =＃121212> 
  

查看Apple开发人员文档：
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent /pinnedTabs/pinnedTabs.html

The Macbook Pro 13 and 15" laptops have a Touch Bar (interactive display) on the keyboard. All the bookmarks are displayed on the Touch Bar when using Safari. Some websites (like Facebook) show a custom icon with a custom background color on the Touch Bar. How do I do this as a web developer?

Do I need to use a special Favicon, or use special HTML meta-tags (like og:image) in a specific image format?

Bookmarks example on the Touch Bar:

解决方案

I have found the answer to my question after a week. Hope this helps someone.

First, you need to create and upload a special vector image of your logo to your website. The vector image needs to be 100% black with a transparent background. Then you need to add a "mask-icon" metatag to your website. You can set a color for your image in this HTML tag. This image is used for the touch bar and also for pinned tabs.

The mask-icon HTML tag:

<link rel="mask-icon" href="website_icon.svg" color="#121212">

Check out the Apple developer docs: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

这篇关于触摸栏上的自定义Safari书签图标和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！