自从苹果升级为带Touch Bar的新Macbook Pro之后,每次打开Safari浏览器的时候,空白页面,在Touch Bar区域会显示Safari的收藏栏内容,像这样

我们能看到Touch Bar区域显示的是网站的图标,这个是如何做到的呢?

在苹果Safari官网的支持文档中,给出了解决方案,具体如下

在head区域增加meta标签

<link rel="mask-icon" href="website_icon.svg" color="red">
其中color部分的值支持16进制的写法 #ffffff

设计增加对应的svg文件

对应的svg文件的要求是viewBox的值必须是 0 0 16 16,这样才能显示出来(结尾我们会提供一个案例作为设计参考)

增加好之后,刷新safari的缓存,然后添加你的网站进收藏栏,就能看到效果了

 

website-icon.svg的参考文件下载