苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

苹果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属性。

结论：

• 使用apple-touch-icon属性为“增加高光光亮的图标”；
• 使用apple-touch-icon-precomposed属性为“设计原图图标”；

大家牢记了，说了通篇感觉最有用的就是最后两句。哈哈。