关于Touch Icon

在WebChromeClient接口中有个方法:

public void onReceivedTouchIconUrl (WebView view, String url, boolean precomposed)

在android API文档中有关于该方法的说明: "Notify the host application of the url for an apple-touch-icon"。在做webkit移植时,就很疑惑这个方法的作用,因为我们到最后都没有实现这个方法,也没有发现哪个地方需要这个接口。在做browser2.0的时候,做到这个地方时,又有人提出了这个疑问,这个和FavIcon到底有什么区别。还是决定寻找一下相关的资料,彻底弄明白这个touch icon的用途。

什么是Apple Touch Icon?

Apple在IOS上使用Apple Touch Icon来表示网站(类似favicon)。safari mobile中有一个功能,将当前页面添加到主屏幕,主屏幕上的图标就是该Touch Icon。如果网站没有提供Touch Icon,添加到主屏幕上的图标就会是网页的缩略图,看起来就比较奇怪了。

随着iphone、ipad席卷全世界,越来越多的网站还是加入了touch icon的支持。google也开始按耐不住了,也在android browser中加入了这一支持。

如何为站点设置Touch Icon

1. 设计Apple Touch Icon

对于IOS视网膜屏而言,最佳尺寸为144×144。格式要求为PNG。命名为apple-touch-icon.png,在主屏上显示圆角并带特效,命名为apple-touch-icon-precomposed.png,在主屏上显示圆角不带特效。

2. 将Icon放在互联网能够访问的地方

最好将icon放到站点的跟目录,这样站点中每个页面就自动有一个touch icon。

Apple Touch Icon Png Root Folder

3. (可选)如果想为个别网页设置不同于主站的touch icon,可以在link标签中加入。

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

参考资料

1. Android SDK: WebChromeClient

2. How To Setup An Apple Touch Icon For Your Website And Individual Webpages

3. Adding a bookmark to an Android Home screen

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>