自定义网站的 iPad 主屏幕图标

最近在制作 iPad 导航（http://ipaddh.com/），慢慢接触到一些 iPad 网页制作碰到的的特殊问题，接下来几篇文章，我们会一一介绍。希望你能喜欢 🙂 。第一个问题就是关于添加网站到 iPad 主屏幕和自定义网站的主屏幕图标。

添加网站到 iPad 主屏幕

我们知道在 iPad 使用 Safari 浏览网站的时候，如果喜欢某个网站（比如我们刚做的 iPad 导航 http://ipaddh.com/），除了可以把该网站添加到书签以及 Email 给好友之外，还可以把这个网站添加到主屏幕，使得该网站类似于一个 iPad 的 App 应用程序，下次打开就直接点击该图标而不需要重新输入网址。

添加网站到 iPad 主屏幕

iPad 的主屏幕 Webclip 图标功能

但是如果该网站没有做任何设置，添加到 iPad 主屏幕显示的是 iPad 自动将页面截屏并缩放到相应尺寸生成的图标，这样对于用户来说不是那么显著，其实 iPad 有个叫做 Homescreen Webclip 功能，它可以让你定义显示添加到 iPad 主屏幕的图标。

如何给网站创建 iPad Webclip 图标

因为 iPad 会自动给图标添加一些视觉效果，如圆角、阴影和玻璃反光效果，为了保证你的图标可以利用这些视觉效果，应该制作一个 72X72 像素，90度直接无任何发亮或光泽的的 PNG 格式的图标（如果图片不符合标准尺寸， iPad 会自动按比例调整）。

然后在你的网站的 head 通过以下代码调用这个图标。

<link rel="apple-touch-icon-precomposed" href="http://ipaddh.com/wp-content/themes/ipaddh/logo.png" >

当然如果你将该 PNG 图片命名为 apple-touch-icon.png 放在根目录下，不需要任何语句，iPad 也会直接调用该图标。

最后的效果如下图，当然欢迎你使用 iPad 访问 iPad 导航（http://ipaddh.com/），你可以通过添加iPad 导航到主屏幕来测试该功能 ：-）

iPad 导航的 Webclip 最终效果