网站设置不用类型的icon

发表于 阅读 36

icon

icon用于设置网站的图标.

<link rel="icon" href="favicon.ico" />

还可以设置不同的sizes

apple-touch-icon

用于设置移动平台上的图标,该属性是苹果的私有属性,iPhone,iPad,iTouch的Safari浏览器可以通过添加到主屏幕按钮将网站添加到主屏幕上。

<link href="icon.png" rel="apple-touch-icon" />

apple-touch-icon-precomposed

上面apple-touch-icon还有另一种写法, 这种写法会去掉ios自动给图片添加的那层高光

<link href="icon.png" rel="apple-touch-icon-precomposed" />

apple-touch-startup-image

用户加上启动画面

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />

mask-icon

icon可以设置svg类型的图标

<link rel="icon" href="favicon.svg" />

但是在Safari上需要使用mask-icon,图标同样是使用svg文件,但是需要设置color属性,并且也只支持单色。 color属性也只在rel值为mask-icon时生效。

<link rel="mask-icon" href="favicon.svg" color="ff0000"/>
相关文章