iPhone 5发布了，虽然有些让人失望，但是 iPhone
的地位还是无可厚非的。随着移动设备的大军进入，各位站长是否有考虑过开发自己网站的 APP 呢？当然不是谁都有这技术的…这样，Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意，我们可以通过它伪装出一个 APP 来。
但是大家是否有发现，“添加至主屏幕”后，那个图标是你网站的缩略图，不怎么好看。那么如何自定义网站“添加至主屏幕”的图标呢？Packy
研究了一番，发现其实很简单，只要在页面的head中添加相应代码就可以了。
自定义图标方法
我们先拿网易的代码看看：
<link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed">
<link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-114x114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed">
通过上面的这段代码，我们可以看出，Safari 是可以下载你指定的网站图标滴！
另外有些网站页面里没有添加代码至 head，但是 Safari 也能下载到图标，抓了一下包分析了一下，原来如果页面里没有，Safari
还会默认访问以下地址：
GET /apple-touch-icon-57x57.png
GET /apple-touch-icon-57x57-precomposed.png
GET /apple-touch-icon-precomposed.png
进阶
回到代码的方法，我们可以看到网易的代码里有 rel=这个属性，那么
apple-touch-icon-precomposed 和 apple-touch-icon的 区别是什么呢？
给大家讲下结论：
apple-touch-icon：增加高光光亮的图标
apple-touch-icon-precomposed：设计原图图标
为了让大家直观的看出区别，可以参考下面这图：
注意图标上面的光泽感，看明白了吧，使用 apple-touch-icon 属性的明显比使用 apple-touch-icon-precomposed
图标多出一个高光。
因为在 iOS 系统中对 icon 有一套规范，就是在 iOS 设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是 iOS
设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。
由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了
apple-touch-icon 和 apple-touch-icon-precomposed 属性。
总结
icon.png 的尺寸是114×114，
如果使用 apple-touch-icon 这个属性不需要做圆角和高光，iPad、iPhone 会自动加。
苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的，之前在网上查了下相关的资料和苹果的开发文档手册，对这两中属性区别说的不够详细，导致现在大家开发的时候有些混淆。
苹果safari浏览器定义的这两种属性是为了苹果移动设备（ipod、ipad、iphone）对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性，当你建立一个移动网站（俗称：手机站，mobile web），避免不了为移动站的图标进行设置（这里有篇关于苹果meta设置详解的文章>>点击查看<<），在这篇文章当中尚未介绍这两中属性的区别，这篇文章就是弥补这一空缺。
图标设置的属性分为：
apple-touch-icon 和 apple-touch-icon-precomposed两种属性，从字面意思上可以看出，第一个是 “苹果移动设备图标”，第二个为“苹果移动设备初始图标样式”，由于第二个的意思完全搞不明白预设是预设的什么究竟有什么不同的地方，从官方资料当中也没有搞懂有什么明显的不同，通过实验得知了这两个明显的差异。
直接上图：
图片一:
从图中（图片一）右下角可以看出有两个Milanoo图标，分别是apple-touch-icon 和 apple-touch-icon-precomposed属性的图标，看出区别了没？
放大看大图：注意图标上面的光泽感，看明白了吧，使用apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光，因为在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon 和 apple-touch-icon-precomposed属性。
结论：
大家牢记了，说了通篇感觉最有用的就是最后两句。哈哈。