Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
iOS 8 Web App
<!doctype html>
<html>
<head>
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Customize home screen title. -->
<meta name="apple-mobile-web-app-title" content="Web App">
<!-- Disable phone number detection. -->
<meta name="format-detection" content="telephone=no">
<!-- Set viewport. -->
<meta name='viewport' content='width=device-width, initial-scale=1, minimal-ui=1, maximum-scale=1'>
<title>iOS 8 Web App</title>
<!-- Icons -->
<link href="/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<link href="/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<link href="/apple-touch-icon-76x76.png" sizes="76x76" rel="apple-touch-icon">
<link href="/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<link href="/apple-touch-icon-120x120.png" sizes="120x120" rel="apple-touch-icon">
<link href="/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
<link href="/apple-touch-icon-152x152.png" sizes="152x152" rel="apple-touch-icon">
<link href="/apple-touch-icon-180x180.png" sizes="180x180" rel="apple-touch-icon">
<!-- Startup screens -->
<!-- iPhones to subtract 20px*(pixel ratio) from height in portrait only -->
<!-- iPads need to subtract 20px*(pixel ratio) from height in both portrait and landscape -->
<!-- iPhone, iPod Touch, portrait -->
<link href="/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone, iPod Touch, landscape -->
<link href="/apple-touch-startup-image-480x320.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone 4, 4S, portrait -->
<link href="/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 4, 4S, landscape -->
<link href="/apple-touch-startup-image-960x640.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5, 5S, 5C, portrait -->
<link href="/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5, 5S, 5C, landscape -->
<link href="/apple-touch-startup-image-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6, portrait -->
<link href="/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6, landscape -->
<link href="/apple-touch-startup-image-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6+, portrait -->
<link href="/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone 6+, landscape -->
<link href="/apple-touch-startup-image-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPad 1, 2, Mini, portrait -->
<link href="/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">
<!-- iPad 1, 2, Mini, landscape -->
<link href="/apple-touch-startup-image-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, portrait -->
<link href="/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">
<!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, landscape -->
<link href="/apple-touch-startup-image-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body>
<h1>iOS 8 Web app</h1>
<p>Add this page to your home screen or <a href="https://gist.github.com/338ac838516b4951aadf">view its source</a>.
</body>
</html>
@ccorcos
Copy link

ccorcos commented Jan 26, 2015

Sweet! It would be great if this would work for Android as well. I don't have an android through so I don't know...

@manelephant
Copy link

manelephant commented May 13, 2015

Hello thanx for the code,

Do you know why online generators create for example an image of 320x480 when your example is 320x460 ?

@lukehook
Copy link

lukehook commented Apr 7, 2016

@manelephant - The 20px difference is to compensate for the status bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment