Skip to content

Instantly share code, notes, and snippets.

@alessandroraffa
Last active July 29, 2016 09:55
Show Gist options
  • Save alessandroraffa/a56045da8aaa9900f79a5cbcbc162ba9 to your computer and use it in GitHub Desktop.
Save alessandroraffa/a56045da8aaa9900f79a5cbcbc162ba9 to your computer and use it in GitHub Desktop.
HTML5 <head> tags for web application
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>web app name</title>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"><!-- Add to homescreen for Safari on iOS -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-precomposed-114x114.png"><!-- iPhone retina icon (iOS< 7) -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-precomposed-120x120.png"><!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-precomposed-144x144.png"><!-- iPad retina icon (iOS< 7) -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-precomposed-152x152.png"><!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed-180x180.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-precomposed-57x57.png"><!-- iPhone non-retina icon (iOS< 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-precomposed-72x72.png"><!-- iPad non-retina icon (iOS< 7) -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-precomposed-76x76.png"><!-- iPad non-retina icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Add to homescreen for Safari on iOS -->
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-startup-image" href="/startup.png">
<link rel="apple-touch-startup-image" href="/startup-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><!-- iPhone 6 Plus landscape startup image -->
<link rel="apple-touch-startup-image" href="/startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><!-- iPhone 6 Plus portrait startup image -->
<link rel="apple-touch-startup-image" href="/startup-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><!-- iPad retina landscape startup image -->
<link rel="apple-touch-startup-image" href="/startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><!-- iPad retina portrait startup image -->
<link rel="apple-touch-startup-image" href="/startup-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"><!-- iPhone< 5 non-retina startup image -->
<link rel="apple-touch-startup-image" href="/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"><!-- iPhone 5 startup image -->
<link rel="apple-touch-startup-image" href="/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"><!-- iPhone< 5 retina startup image -->
<link rel="apple-touch-startup-image" href="/startup-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)"><!-- iPad non-retina landscape startup image -->
<link rel="apple-touch-startup-image" href="/startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"><!-- iPhone 6 startup image -->
<link rel="apple-touch-startup-image" href="/startup-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)"><!-- iPad non-retina portrait startup image -->
<link rel="icon" sizes="192x192" href="/chrome-touch-icon-192x192.png"><!-- Add to homescreen for Chrome on Android -->
<link rel="manifest" href="/manifest.json"><!-- Web Application Manifest -->
<link rel="shortcut icon" href="/favicon.png">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes"><!-- Allow web app to be run in full-screen mode and add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="#3f51b5"><!-- Configure the status bar (usually "black") -->
<meta name="apple-mobile-web-app-title" content="web app name"><!-- Make the app title different than the page title. -->
<meta name="application-name" content="web app name"><!-- Add to homescreen for Chrome on Android -->
<meta name="format-detection" content="telephone=no"><!-- Disable automatic phone number detection. -->
<meta name="HandheldFriendly" content="True">
<meta name="mobile-web-app-capable" content="yes"><!-- Add to homescreen for Chrome on Android -->
<meta name="MobileOptimized" content="320">
<meta name="msapplication-tap-highlight" content="no"><!-- Disable tap highlight on IE -->
<meta name="msapplication-TileColor" content="#3f51b5"><!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/ms-touch-icon-144x144-precomposed.png"><!-- Tile icon for Win8 (144x144 + tile color) or "/apple-touch-icon-144x144.png" -->
<meta name="theme-color" content="#3f51b5"><!-- Color the status bar on mobile devices -->
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment