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

iPhone 5发布了,虽然有些让人失望,但是 iPhone 的地位还是无可厚非的。随着移动设备的大军进入,各位站长是否有考虑过开发自己网站的 APP 呢?当然不是谁都有这技术的...这样,Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意,我们可以通过它伪装出一个 APP 来。

但是大家是否有发现,“添加至主屏幕”后,那个图标是你网站的缩略图,不怎么好看。那么如何自定义网站“添加至主屏幕”的图标呢?Packy 研究了一番,发现其实很简单,只要在页面的head中添加相应代码就可以了。

自定义图标方法

我们先拿网易的代码看看:

代码语言:javascript
复制
<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 还会默认访问以下地址:

代码语言:javascript
复制
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 会自动加。