Home screen icons and startup screens

First, that regular favicon. This isn’t just a scaled down version of the logo, it’s a highly simplified 16x16px version by the icon master himself, Jon Hicks. Jon also provided a more detailed 32x32px favicon PNG for Safari’s Instapaper Reading List feature.

(Update. First time around I forgot to add Jon’s 32x32px version of my favicon, so I’ve updated the code below with <link rel="shortcut icon" href="/favicon.png">².)

<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.png">

Then I added progressively larger versions of Jon’s beautiful version of our logo.

<!-- 57x57 (precomposed) for iPhone 3GS, 2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and 2012 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

I chose apple-touch-icon-precomposed as I don’t want iOS to add its reflective shine, but if that’s what you’d like, use apple-touch-icon instead.

I’ll admit, that’s a whole lot of proprietary HTML elements just to serve a few icons. If I cared about only iOS, I could’ve omitted those link elements altogether and simply placed my icons, named specifically, in the root directory and iOS will look for and use those files¹. In the case of 114x114px icons for retina iPhones and iPod Touch:

• apple-touch-icon-114x114-precomposed.png
• apple-touch-icon-114x114.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

As I care about Android as well as iOS, I’m stuck with those proprietary link elements.

Startup screen images

Speaking of iOS, and although I’ll probably be properly castigated for it, I decided to have a little play with iOS’ also proprietary web-app-capable meta element:

<meta name="apple-mobile-web-app-capable" content="yes">

Add this element and, when an iOS user launches a site from a home screen icon, it’ll open ‘app style,’ full screen and without browser chrome.

---

(Update. Not having an iPhone 5 of my own is starting to cause me a few unexpected testing problems. It turns out that iPhone 5, apple-mobile-web-app-capable ‘letterboxes’ a full-screen site just like it would a native application that’s not been optimised for its taller screen. The cure is an odd one. Remove the viewport width from any meta elements³. Here’s before:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And after:

<meta name="viewport" content="initial-scale=1.0">

---

When I set my site to this mode, while my home page loads in the background, iOS will display a startup screen and I’ve made a different startup image for each screen size and orientation:

<!-- iPhone 3GS, 2011 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-320x460.png" media="screen and (max-device-width : 320px)">

<!-- iPhone 4, 4S and 2011 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">

<!-- iPhone 5 and 2012 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">

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

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

(I don’t have a 3rd or 4th generation iPad to test yet, but I guess that’ll be up next.) Here are all those startup images:

• startup-320x460.png
• startup-640x920.png
• startup-640x1096.png
• startup-768x1004.png
• startup-1024x748.png

I know, I know, that startup images are not intended for sites like mine, but good Lord do Josh Cleland’s mods look good! I just couldn’t resist.

iPad landscape startup screen image. (Full size)

• 1. Everything you always wanted to know about touch icons by Mathias Bynens
• 2. Multi-Resolution Favicons and Safari’s Reading List
• 3. New iPhone 5 and iOS 6 Features for HTML 5 Developers