网站设置不用类型的icon
更新于 阅读 58 次
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"/>