自从苹果升级为带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的参考文件下载