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” href=”touch-icon-iphone.png” /
link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” /
link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” /
因为某种原因以上的代码都不带 <> 号,请自行为代码添加上:<>
如果没有图片尺寸可以匹配设备图标的尺寸,存在比设备图标大的图片,将使用比设备图标尺寸略大的图片;如果没有比设备图标大的图片,则使用最大的图片!如果没有在网页中指定图标路径,将会在根目录搜寻以 apple-touch-icon…apple-touch-icon-precomposed… 作为前缀的 PNG 图片. 假设现在有一个设备的图标大小是 57 x 57,系统将按以下顺序搜寻图标:1.pple-touch-icon-57×57-precomposed.png 2.le-touch-icon-57×57.png 3.le-touch-icon-precomposed.png 4.le-touch-icon.png
主屏幕图标尺寸:iPhone 和 iPod (iTouch) 使用的图标尺寸:57 x 57 pixels,14 x 114 pixels (高分辨率, iPhone 4 或以上使用),iPad 使用的图标尺寸:72 x 72 pixels主屏幕图标效果:当我们将图片作为主屏幕图标, iOS 系统会自动为图标加上视觉效果:圆角、阴影、高亮!
例如:一个 57 x 57 的网站图标如下!

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

所以无需对图片做太多处理,提供符合尺寸的正方形图片即可,无论是将图标放在默认位置上!还是指定图标路径,图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png),系统将不会为你加上高亮效果!