在微信上关注我们
We always need to set an Touch Icon when we are developing a website. Because of the difference of systems, there is no common standard for adding Touch Icon. IOS is the system that support Touch Icon earliest and has clear standard, so other systems partly support IOS's standard.
This is a way to support both iOS 4.2+ and Android 2.1+:
<link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png">rel="apple-touch-icon-precomposed"：No extra effects. Works on Android 1.5 - 2.1.Read following contents for more details.
<!-- Add to homescreen for Safari on iOS. Hide address bar and status bar if enter from homescreen. Full screen (content="yes") -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color of the system headbar(content = black、white 和 black-translucent) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Setting title -->
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<!-- Setting Touch Icon, PNG is recommended -->
<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">
<!--
Using rel="apple-touch-icon" will add round corner and highlight to icon;
Using rel="apple-touch-icon-precomposed" will use the original icon.
-->Size：
| Device | iPhone 5 and iPod touch (High Resolution) | iPhone and iPod touch (High Resolution) | iPad and iPad mini (High Resolution) | iPad 2 and iPad mini (Normal Resolution) |
|---|---|---|---|---|
| Size (px) | 120 x 120 | 120 x 120 | 152 x 152 | 76 x 76 |
Reference:
Only Chrome 31 support Add to Homescreen in Android.
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="images/touch/chrome-touch-icon-196x196.png">Reference:
<!-- Tile icon for Win8 (144x144 + tile color) -->
<!-- win 8 Tile icon -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- win 8 Tile color -->
<meta name="msapplication-TileColor" content="#3372DF">Reference: