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-precomposed和apple-touch-icon两种设置的区别探究一文，Packy只给大家讲下结论：
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 会自动加。
>>> 继续阅读全文 ...
欢迎关注我们关于 WordPress 技巧的微博：
新浪微博： http://weibo.com/wpjam
腾讯微博： http://t.qq.com/WordPressJam
© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博
