dudo博客

收藏夹图标也叫favicon,现在几乎所有的网站都在使用,当你用浏览器打开一个网站时,在浏览器的标签页标题栏最左侧会出现一个小图标,这就是favicon,例如Google的是一个四彩的大写的“G”,百度是一个蓝色的熊掌等。这样的图标一般是ico格式的,也有的是png的格式的,不同的是老式浏览器的png格式可能无法显示。但是随着移动设备的普及,特别是iOS设备的普及,这种设置已经变得不再唯一了。当你在一台iOS设备上用Safari浏览器打开一个网站时,即使它设置了favicon图标,也无法显示,这是因为iOS设备上有一套自己的设置方式。这里我们就说一说怎么来设置。

按照苹果自己的说法,现在的写法最简单便可以用:

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

需要注意的,这里的图标应该是png格式的,且为正方形。通过上面的方式添加的图标,如果我们在safari中选“添加到主屏幕”后,则会在主屏上看到我们设计的图标,默认情况下,系统会自动为这个图标添加阴影效果,如果你不想要这个阴影效果,只需要在rel后面添加上“-precomposed”即可。

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

事实上,即使你在<head></head>标签中没有设置这个<link />标记也没有关系,只要你将这个图标命名为apple-touch-icon-xxx.png的格式即可,iOS中的Safari自动去加载这个图标。

由于iOS平台设备众多,从iPhone到iPad各种分辨率,各种屏幕大小规格不一,一般情况下苹果建议开发者为不同的用户设计不同尺寸和分辨率的图标文件,如dudo博客中使用的图标规格如下:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-precomposed-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-precomposed-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-precomposed-114x114.png"/>

一般情况下,iPhone会选择使用57*57大小的图标,iPad则会选择大分辨的图标。如果你不想让你的页面变得如此混乱,那么你可以只选其中的一个添加即可。Safari的加载顺序是:首先选择设备最为适配的图标,如果没有则往上寻找大分辨率的图标,直至找到为止;如果没有更大分辨率的图标,则寻找小分辨率图标。

经过如此设置之后,无论是你在Safari中通过“添加到主屏幕”来向主屏幕添加图标,还是在Safari的常用网站里,都会直接显示你的网站logo,如果你的网站没有设置,那么就会像右侧的那样,是一个灰色的方块显示:

iOS的Safari中添加收藏主屏幕图标



共有(7)条评论

韩威博客 发表于 2016-12-26 at 13:29 #1楼

长见识了。。。

[回复]

QQ技术博客 回复:

是涨姿势了

[回复]


节约钱优惠券分享平台 发表于 2017-1-01 at 21:05 #2楼

一直在用IOS系统,却很少留意这个

[回复]


马超金博客 发表于 2017-1-03 at 22:08 #3楼

一直使用安卓系统

[回复]


淘宝优惠券领取 发表于 2017-1-04 at 21:46 #4楼

感谢分享哈

[回复]


凯哥自媒体 发表于 2017-1-05 at 09:42 #5楼

挺好的,感谢博主的分享。

[回复]


QQ技术博客 发表于 2017-1-20 at 13:19 #6楼

涨姿势了

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量