收藏夹图标也叫favicon，现在几乎所有的网站都在使用，当你用浏览器打开一个网站时，在浏览器的标签页标题栏最左侧会出现一个小图标，这就是favicon，例如Google的是一个四彩的大写的“G”，百度是一个蓝色的熊掌等。这样的图标一般是ico格式的，也有的是png的格式的，不同的是老式浏览器的png格式可能无法显示。但是随着移动设备的普及，特别是iOS设备的普及，这种设置已经变得不再唯一了。当你在一台iOS设备上用Safari浏览器打开一个网站时，即使它设置了favicon图标，也无法显示，这是因为iOS设备上有一套自己的设置方式。这里我们就说一说怎么来设置。
需要注意的，这里的图标应该是png格式的，且为正方形。通过上面的方式添加的图标，如果我们在safari中选“添加到主屏幕”后，则会在主屏上看到我们设计的图标，默认情况下，系统会自动为这个图标添加阴影效果，如果你不想要这个阴影效果，只需要在rel后面添加上“-precomposed”即可。
由于iOS平台设备众多，从iPhone到iPad各种分辨率，各种屏幕大小规格不一，一般情况下苹果建议开发者为不同的用户设计不同尺寸和分辨率的图标文件，如dudo博客中使用的图标规格如下：
一般情况下，iPhone会选择使用57*57大小的图标，iPad则会选择大分辨的图标。如果你不想让你的页面变得如此混乱，那么你可以只选其中的一个添加即可。Safari的加载顺序是：首先选择设备最为适配的图标，如果没有则往上寻找大分辨率的图标，直至找到为止；如果没有更大分辨率的图标，则寻找小分辨率图标。
经过如此设置之后，无论是你在Safari中通过“添加到主屏幕”来向主屏幕添加图标，还是在Safari的常用网站里，都会直接显示你的网站logo，如果你的网站没有设置，那么就会像右侧的那样，是一个灰色的方块显示：
//--
//--
lilian :非常棒的插件！要是能将自定义字段的外链也能转成内链就更好了，很多人需要这个功能啊，等大神加入啊！
千杯 :真是充满了岁月痕迹的博客啊……是什么让你这一年里变化这么大，简直是质变啊，量的积累肯定也有吧
千杯 :难得一见做这么久个人博客的人了，膜拜一下，我的域名也快10年了，然而用的时间并不多，相比之下比较惭愧
Tags:seo以上就是在iOS的Safari中设置主屏和收藏夹图标的全部内容了，希望大家喜欢。