苹果浏览器页面添加网站图标到主屏代码详细介绍

在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

分别放置57×57（默认值）的图标对应320×640的老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。由于手头没有iPad3，所以没测试是否支持144×144的图标在iPad3上的显示。

虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角处理，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。

图标搜索的优先级如下：

• 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

• 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

• 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：

1. apple-touch-icon-57×57-precomposed.png

2. apple-touch-icon-57×57.png

3. apple-touch-icon-precomposed.png

4. apple-touch-icon.png

各尺寸自适应代码：

默认：57x57，iPad：72x72，iPhone 4,Retina屏：114x114（原尺寸的2倍）

　> 相关阅读：

• jquery和ajax是什么关系?主要应用在哪？
• border边框在浏览器中的渲染方式
• 网站中qq在线留言设置详细说明
• 聊城精英告诉你asp获取地址栏参数如何反编码
• 网站后台表格隔行换色 ecshop后台隔行换色修改
• 什么是长尾词 企业网站如何使长尾词获得排名
• 工信部张峰:互联网业务已成信息通信业主导力量
• 互联网加时间 我们聊城的网络公司应该如何给客户做网站
• 2015年元宵节 百度取消了首页快照显示时间
• 微软雅黑字体在苹果浏览器不支持问题解决办法