iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标.

网站的主屏幕图标

iPhone/iPad 上的原生浏览器可以向主屏幕添加小图标, 作为网站入口. 如果网站没做过兼容处理, 小图标显示的是网页截图.

设定主屏幕图标

看到上面的截图, 我想你会打算自定义一个图标了. iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方式.

放置在默认位置

创建一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录即可.

指定图标路径

为页面指定一个图标路径, 在网页的 head 部分代码如下:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

为不同设备指定图标

在网页中为不同的设备指定特殊图标, 因为 iPhone 和 iPad 的图标尺寸不一样, 需要 sizes 属性来进行区分, 如果没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码如下:

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />  
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />  
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />    
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad3-144.png" />

如果没有图片尺寸可以匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 如果没有比设备图标大的图片, 则使用最大的图片.

虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角和高光效果，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，这时我们提供的图标就要自己做圆角和高亮效果了。

图标搜索的优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：

• apple-touch-icon-57x57-precomposed.png

• apple-touch-icon-57x57.png

• apple-touch-icon-precomposed.png

• apple-touch-icon.png

在第三代 iPad 上有四种图标规格： 57x57, 72x72, 114x114, 144x144.

由于 retina 图标的尺寸是标准图标大小的2倍，因此实际上我们只需要只做2款图标即可：114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸，那么IOS就会根据情况自动进行缩放了。

主屏幕图标尺寸

iPhone 和 iPod (iTouch) 使用的图标尺寸:  57 x 57 pixels，114 x 114 pixels (高分辨率, iPhone 4 或以上使用)

iPad 使用的图标尺寸: 72 x 72 pixels

主屏幕图标效果

当我们将图片作为主屏幕图标, iOS 系统会自动为图标加上视觉效果:   圆角、阴影、高亮

例如, 一个 57 x 57 的网站图标如下:

当用户将网页添加到主屏幕, 图标会加上上述效果, 如下:

所以我们无需对图片做太多处理, 提供符合尺寸的正方形图片即可.

无论是将图标放在默认位置上, 还是指定图标路径, 如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png), 系统将不会为你加上高亮效果.

后话

本文参考了 Safari 开发文档的两篇文章:《Configuring Web Applications》和《Custom Icon and Image Creation Guidelines》. 主要摘要了关于主屏幕图标的一些内容, 如果发现错漏和疑问, 请留言反馈.

我也为这个博客添加主屏幕图标, 同学们可以在设备中打开试试效果.

未经允许请勿转载：程序喵 » 关于Apple设备私有的apple-touch-icon属性详解