simplified icons, added full support for all add to home screen platforms

app/basic.html

@@ -7,20 +7,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title></title>
 
-    <!-- Add to homescreen for Chrome on Android -->
+    <!-- Hide the browser UI when installed to home screen (Chrome, Safari) -->
     <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-
-    <!-- Add to homescreen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <!-- Set the correct name when installed to home screen (IE, Safari) -->
+    <meta name="application-name" content="Web Starter Kit">
     <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
-    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
 
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <!-- Icon in the highest resolution we need it for, reused for Safari -->
+    <link rel="icon" sizes="228x228" href="images/touch/icon-192x192.png">
+    <link rel="apple-touch-icon" href="images/touch/icon-192x192.png">
+
+    <!-- Multiple icons for IE11 on Win8 (actual images are 1.8 larger, per MS recommendation) -->
+    <meta name="msapplication-square70x70logo" content="images/touch/icon-128x128.png">
+    <meta name="msapplication-square150x150logo" content="images/touch/icon-270x270.png">
+    <meta name="msapplication-wide310x150logo" content="images/touch/icon-558x270.png">
+    <meta name="msapplication-square310x310logo" content="images/touch/icon-558x558.png">
+
+    <!-- Tile icon for IE10 on Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/icon-144x144-precomposed.png">
     <meta name="msapplication-TileColor" content="#3372DF">
 
+    <!-- Status bar style (Safari) -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
     <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
     <!--
     <link rel="canonical" href="http://www.example.com/">

app/index.html

@@ -7,19 +7,93 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Web Starter Kit</title>
 
-    <!-- Add to homescreen for Chrome on Android -->
+    <!-- Hide the browser UI when installed to home screen (Chrome, Safari) -->
     <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-
-    <!-- Add to homescreen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <!-- Set the correct name when installed to home screen (IE, Safari) -->
+    <meta name="application-name" content="Web Starter Kit">
     <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
-    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
 
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
-    <meta name="msapplication-TileColor" content="#3372DF">
+    <!-- Icons -->
+
+      <!-- Icon in the highest resolution we need it for, reused for Safari -->
+      <link rel="icon" sizes="228x228" href="images/touch/icon-192x192.png">
+      <link rel="apple-touch-icon" href="images/touch/icon-192x192.png">
+
+      <!-- Multiple icons for IE11 on Win8 (actual images are 1.8 larger, per MS recommendation) -->
+      <meta name="msapplication-square70x70logo" content="images/touch/icon-128x128.png">
+      <meta name="msapplication-square150x150logo" content="images/touch/icon-270x270.png">
+      <meta name="msapplication-wide310x150logo" content="images/touch/icon-558x270.png">
+      <meta name="msapplication-square310x310logo" content="images/touch/icon-558x558.png">
+
+      <!-- Tile icon for IE10 on Win8 (144x144 + tile color) -->
+      <meta name="msapplication-TileImage" content="images/touch/icon-144x144-precomposed.png">
+      <meta name="msapplication-TileColor" content="#3372DF">
+
+    <!-- Safari specific -->
+
+      <!-- Status bar style -->
+      <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+      <!-- Startup Image-->
+
+        <!-- iOS 6 & 7 iPad (retina, portrait) -->
+        <link href="images/touch/apple-touch-startup-image-1536x2008.png"
+             media="(device-width: 768px) and (device-height: 1024px)
+                and (orientation: portrait)
+                and (-webkit-device-pixel-ratio: 2)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 & 7 iPad (retina, landscape) -->
+        <link href="images/touch/apple-touch-startup-image-1496x2048.png"
+             media="(device-width: 768px) and (device-height: 1024px)
+                and (orientation: landscape)
+                and (-webkit-device-pixel-ratio: 2)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 iPad (portrait) -->
+        <link href="images/touch/apple-touch-startup-image-768x1004.png"
+             media="(device-width: 768px) and (device-height: 1024px)
+                and (orientation: portrait)
+                and (-webkit-device-pixel-ratio: 1)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 iPad (landscape) -->
+        <link href="images/touch/apple-touch-startup-image-748x1024.png"
+             media="(device-width: 768px) and (device-height: 1024px)
+                and (orientation: landscape)
+                and (-webkit-device-pixel-ratio: 1)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 & 7 iPhone 5 -->
+        <link href="images/touch/apple-touch-startup-image-640x1096.png"
+             media="(device-width: 320px) and (device-height: 568px)
+                and (-webkit-device-pixel-ratio: 2)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 & 7 iPhone (retina) -->
+        <link href="images/touch//apple-touch-startup-image-640x920.png"
+             media="(device-width: 320px) and (device-height: 480px)
+                and (-webkit-device-pixel-ratio: 2)"
+             rel="apple-touch-startup-image">
+
+        <!-- iOS 6 iPhone -->
+        <link href="images/touch/apple-touch-startup-image-320x460.png"
+             media="(device-width: 320px) and (device-height: 480px)
+                and (-webkit-device-pixel-ratio: 1)"
+             rel="apple-touch-startup-image">
+
+    <!-- MS specific -->
+
+      <!-- Tooltip (Desktop) -->
+      <meta name="msapplication-tooltip" content="Start the Web Starter Kit app">
+
+      <!-- Start url when pinned (Desktop) -->
+      <meta name="msapplication-starturl" content="./">
+
+      <!-- Color of navigation buttons (back/forward) (Desktop) -->
+      <meta name="msapplication-navbutton-color" content="#FF3300" />
 
     <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
     <!--