苹果网站图标apple-touch-icon使用详解
苹果网站图标apple-touch-icon使用详解
在iPhone、iPad、iTouch的Safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在<head></head>区域加入下面代码即可。
<link rel="apple-touch-icon"href="/qz.png"/>
分别放置57x57（默认值）的图标对应320x640的老设备，72x72对应ipad，114x114对应retina屏的iPhone及iTouch。
官方说明图片格式为png，图片无需做圆角处理，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。
图标搜索的优先级如下：
- 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
- 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
- 如果有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon…或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57，优先级如下：
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
便捷的方法，可以直接设置一个最大尺寸的图标，如使用一个114x114大小的图标，在iPhone4以及iPad2上都可以正常显示。以上内容在iPhone4以及iPad2上测试通过。
0