iOS Webapp的桌面图标及更新

iOS允许网站开发者像NativeApp一样在iOS设备的主屏幕为其网站添加一个启动Icon，这个代表着网站的Icon在苹果官方开发者文档里被称为“Web Clip”，它的作用类似于桌面浏览器的书签，用户通过点击Icon能直接快速打开这个url的网站。

 

为了给某个网页或者整个网站指定一个漂亮的桌面启动图标，iOS Safari提供了两个私有接口： apple-touch-icon 和 apple-touch-icon-precomposed。

/ Apple-touch-icon

设置方法

通过在页面HTML的头部添加 <link> 标签
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-precomposed.png" />

这两个标签都是用来指定桌面图标的，但两者有个细微的区别，
•通过 apple-touch-icon 添加的图标是会带iOS图标统一的高光效果
•通过 apple-touch-icon-precomposed 添加的图标则是设计原图，不带高光渐变效果的。

图片大小

为了给不同的iOS设备指定其启动图标，在iOS Human Interface Guide中提到，推荐以下四种尺寸：
 

相应地，要指定不同分辨率的设备的图标，可以添加相应的 <link> 标签序列，官方建议的顺序是这样的：
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

通过 <link> 的 <sizes> 属性可以特别地声明这个图标是为哪种分辨率设备准备的，如果没有指明 <sizes> 属性的大小，则默认值为57×57。

如果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话，那么iOS会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个，如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话，iOS会从这些图片中自动选择最大的那个来作为启动图标。

 

特别地，如果整个页面都没有指定任何的 apple-touch-icon 的图标的话，iOS则会自动去网站根目录寻找有 apple-touch-icon 和 apple-touch-icon-precomposed 前缀的图标文件。

 

原文出处：http://www.cocoachina.com/gamedev/misc/2013/0521/6249.html