Android's Touch Icon processing solution, androidicon

Android's Touch Icon processing solution, androidicon
Apple's Touch Icon is familiar to us. It is an Icon Apple needs to add network applications (or web pages) to the desktop, web links with these Touch icons are more similar to Native applications. Because Apple devices such as IPod, IPhone, and IPad are widely used, many web pages provide icons such as touch icon. Because Android does not have such a standard as early as possible, we still need to use Apple's Touch Icon when we want to add webpages to the desktop.

Touch Icon

When we want to add a webpage to the desktop perfectly, we usually need to set a png Image File as an apple-touch-icon. For example

<span style="font-family:Arial;font-size:14px;"><link rel="apple-touch-icon" href="/custom_icon.png"></span>

To support IPhone and IPad, we need to use the sizes attribute to create multiple images. The default sizes value is 60x60.

<span style="font-family:Arial;font-size:14px;"><link rel="apple-touch-icon" href="touch-icon-iphone.png"><link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"></span>

Before IOS7, the Apple system performs visual processing such as rounded corners on the icons added to the desktop, we can use apple-touch-icon-precomposed as the rel value.