苹果的Touch Icon相对我们都比较熟悉，是苹果为了支持网络应用（或者说网页）添加到桌面需要的图标，有了这些Touch Icon的网页链接更加和Native应用更相像了。由于苹果设备IPod，IPhone,IPad等设备广泛，很多网页都提供了touch icon这种图标资源。由于Android中并没有及早的有一份这样的标准，当我们想把网页添加到桌面时，仍然需要使用苹果的Touch Icon。
Touch Icon
当我们想让一个网页比较完美地添加到桌面，通常情况下我们需要设置一个png图片文件作为apple-touch-icon。比如
<link href="https://www.linuxidc.com/custom_icon.png">
如果想支持IPhone和IPad，我们需要使用sizes属性来制定多个图片，默认sizes的值为60 x 60。
<link href="https://www.linuxidc.com/touch-icon-iphone.png">
<link sizes="76x76" href="https://www.linuxidc.com/touch-icon-ipad.png">
<link sizes="120x120" href="https://www.linuxidc.com/touch-icon-iphone-retina.png">
<link sizes="152x152" href="https://www.linuxidc.com/touch-icon-ipad-retina.png">
在IOS7之前，苹果系统会对添加到桌面的图标进行圆角化等视觉上的处理，为了不让其处理，我们可以使用apple-touch-icon-precomposed来作为rel的值实现。
更多关于Touch Icon的信息，可以访问水果开发者网站了解更多。
Android中有缺陷的实现
在Android WebView提供了处理Touch Icon的回调，onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)该方法返回了对我们有用的touch icon的url，和是否为预组合（在IOS中不需要进行视觉处理）。虽然有这些数据，我们可以进行处理，但是这其中是有问题的，就是我们不好确定文件的大小，来选择适合的图片。
举个例子,如下一个网页的源码，其中sizes的顺序不规律
<link sizes="72x72" href="https://www.linuxidc.com/20130423143600/fix/H5-72x72.png">
<link sizes="114x114" href="https://www.linuxidc.com/20130423143600/fix/H5-114x114.png">
<link sizes="57x57" href="https://www.linuxidc.com/20130423143600/fix/H5-57x57.png">
<link href="https://www.linuxidc.com/20130423143600/fix/H5-0x0.png">
加载网页，onReceivedTouchIconUrl输出的日志
<link sizes="72x72" href="https://www.linuxidc.com/20130423143600/fix/H5-72x72.png">
<link sizes="114x114" href="https://www.linuxidc.com/20130423143600/fix/H5-114x114.png">
<link sizes="57x57" href="https://www.linuxidc.com/20130423143600/fix/H5-57x57.png">
<link href="https://www.linuxidc.com/20130423143600/fix/H5-0x0.png">
从上面的输出来看，基本上是后面（书写）的元素先打印出来，所以这个回调的缺陷如下
1.由于Touch Icon url地址没有硬性规定，不能根据url包含某些尺寸来判断使用哪个icon
2.由于网页编写touch icon元素相对随意，不能根据onReceivedTouchIconUrl调用先后来决定使用哪个icon
3.回调中没有sizes属性值，不好确定使用哪个icon
4.如果我们选取质量最高的图片，然后进行适当压缩处理或许可以解决问题，但是将全部icon下载下来或者根据Head头信息总感觉不怎么好。
改进方法
既然WebView没有现成的方法满足我们的需求，只好自己来实现。其实实现方法还是比较简单地就是js脚本注入检测网页元素中得touch icon，返回json数据。
JavaScript方法
下面的JS代码所做的功能为查找所有为touch icon的link元素，包含正常的还标记为precomposed。然后将这些link元素的属性存入json数据，最后返回给Java代码中对应的回调。
var touchIcons = [];
function gatherTouchIcons(elements) {
var normalTouchIconLength = elements.length;
var currentElement;
for (var i =0; i < normalTouchIconLength;i++) {
currentElement = elements[i];
var size;
if (currentElement.hasAttribute('sizes')) {
size = currentElement.sizes[0];
} else {
size = '';
}
var info = {'sizes':size, 'rel': currentElement.rel, 'href': currentElement.href};
touchIcons.push(info);
}
}
function obtainTouchIcons() {
normalElements = document.querySelectorAll("link[rel='apple-touch-icon']");
precomposedElements = document.querySelectorAll("link[rel='apple-touch-icon-precomposed']");
gatherTouchIcons(normalElements);
gatherTouchIcons(precomposedElements);
var info = JSON.stringify(touchIcons);
window.app_native.onReceivedTouchIcons(document.URL, info);
}
obtainTouchIcons();
Java代码