当把连接保存到手机桌面。设置图标 只在safari浏览器中有用

<link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" />

这个属性是当用户把链接保存到手机桌面时使用的图标，若是不设置，则会用网页的截图。有了这，就能够让你的网页像APP同样存在手机里了

在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

 

图片无需作圆角处理，同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倍）

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />