Get your site ready for the home screen

Once you've got a responsive site all built out, why not enable people to add it to their home screen in iOS? Here are all the basic bits you'll need to make your site "Web App Capable":

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- Homescreen Icons -->
<link rel="apple-touch-icon-precomposed" href="/assets/touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/touch-icon-ipad-retina.png" />

<!-- iPhone/iPod Touch Portrait 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="/assets/startup.png" media="(min-device-width: 320px)" />

<!-- iPhone/iPod Touch Portrait 640 x 920 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" href="/assets/startup-retina.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- For iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/assets/startup-tablet-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- For iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/assets/startup-tablet-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />