Add to Home Screen

add-to-homescreen.html

<!-- hide the browser UI -->
<meta content='yes' name='mobile-web-app-capable'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<!-- set the correct name -->
<meta content='appName' name='application-name'>
<meta content='appName' name='apple-mobile-web-app-title'>
<!-- Icons -->
<link rel="icon" href="/favicon.ico">
<!-- icon in the highest resolution we need it for -->
<link href='images/touch/icon-228x228.png' rel='icon' sizes='228x228'>
<link href='images/touch/icon-228x228.png' rel='apple-touch-icon'>
<!-- multiple icons for IE11 on Win8 (actual images are 1.8 larger, per MS recommendation) -->
<meta content='images/touch/icon-smalltile-128x128.png' name='msapplication-square70x70logo'>
<meta content='images/touch/icon-mediumtile-270x270.png' name='msapplication-square150x150logo'>
<meta content='images/touch/icon-widetile-558x270.png' name='msapplication-wide310x150logo'>
<meta content='images/touch/icon-largetile-558x558.png' name='msapplication-square310x310logo'>
<!-- Tile icon for IE10 on Win8 (144x144 + tile color) -->
<meta content='images/touch/icon-144x144.png' name='msapplication-TileImage'>
<meta content='tileColor' name='msapplication-TileColor'>
<!-- Safari specific -->
<!-- Status bar style -->
<meta content='black' name='apple-mobile-web-app-status-bar-style'>
<!-- 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 content='appName' name='msapplication-tooltip'>
<!-- Start url when pinned (Desktop) -->
<meta content='./' name='msapplication-starturl'>
<!-- Color of navigation buttons (back/forward) (Desktop) -->
<meta content='#FF3300' name='msapplication-navbutton-color'>