自定义网站在 iPhone 上的“添加至主屏幕”的图标

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 会自动加。