为iOS设备自定义WebClip图标

iOS的网越撒越大已是不争的事实，小到iPod nano、大到Apple TV，中间还夹杂着各种Touch、Phone以及Pad。甚至各大网站都针对iPad开发专门的版本以适应这部分用户，恰好前些天看到腾讯ISD Team关于iPad的一个PPT，遂今天试着为我的网站增加了一个自定义的WebClip图标。

所谓WebClip呢，实际上是一个在Launcher上显示的书签，默认会用网页的缩略图作为图标，而我们要做的则是使用自定义图像作为WebClip图标。

WebClip图标规格

至于WebClip的规格，要使用正方形无圆角、无阴影等特效的PNG图片（因为这些特效会由系统来进行渲染生成），分辨率方面，我Google到的几种说法众说纷纭：57×57、72×72、114×114、158×158……各种规格都有。原因大概是几种iOS设备的分辨率和Dpi都不尽相同。最后看到老外的测试结论是选用158×158的规格，一来可以保证高分辨率下足够清晰，二来在低分辨率设备上可以由高分辨率图像缩放所得。

WebClip使用方法

用于WebClip的PNG图片，如果命名为“apple-touch-icon.png”，则直接丢到Web服务的根目录下即可。如果想使用自定义路径，需要在页面的<head></head>部分加入如下代码：

第一段代码会显示为带有阴影、光泽等效果的图标，而第二段带有-precomposed参数的这个用法，会直接显示为原始PNG样式的图标。

最后欢迎围观我的WebClip图标：http://joys.name/apple-touch-icon.png，我没有iOS设备就不测试了，感兴趣的同学可以试试把joys.name放到iOS的Launcher上看看效果。

在Android上显示WebClip

@2010-10-26，由于Android上的HTC Sense同样支持在Launcher上显示书签图标，今天测试了下WebClip在Android上的支持情况，尝试了几次发现同样可以实现，只不过单独添加上面用到的代码不起作用，要同时使用rel="icon"的参数才可以，其中原因尚不明了。

当然了，由于Android不渲染图标，-precomposed的参数就不起任何作用了，不过效果还是不错的，欢迎使用Android的同学测试效果。