Home screen icons and startup screens

I spent a couple of hours this afternoon upgrading this site’s iOS ‘Add to Home Screen’ icons and startup screen images.

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">2.)


<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.

Favicon, 57x57px, 72x72px, 114x114px and 144x144
<!-- 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 files1. In the case of 114x114px icons for retina iPhones and iPod Touch:

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 elements3. 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:

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)

Availability

I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from January 2020

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel,
Gwaenysgor,
Flintshire, North Wales,
LL18 6EJ, UK