ios-webclip-icon_20100920

如同你在上图见到的,我们可以在iPhone、iPad或iPod touch中,把网页书签添加到主屏幕。一般的网站会以网页截图作为图标显示。而图中的Makezine和Apple的网站指定了一个图标,则主屏幕上会显示这个网站的图标,而不是网页截图。

要做到这一点,方法很简单。首先准备一张114×114 144×144Update(06/19/2012):适用于第 3 代 iPad)的PNG图片作为图标,命名为"apple-touch-icon.png”,上传到网站根目录。然后在网页的段中加入以下2行代码中的一行:

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” type=”image/png” />

<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png” type=”image/png” />

这两行代码的区别是,如果使用第一行代码,iOS会给你的图标添加一个光泽效果;而第二行代码则不添加这个效果,保持图片原样不变。

注意:有些网站使用的图标文件规格为57×57,这对iPad和带有Retina Display的iPhone 4来说分辨率不够。详情请参见iPhone Human Interface Guidelines: Creating Custom Icons and Images