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
(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.
<!-- 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">
apple-touch-icon-precomposed as I don’t want iOS to add its reflective shine, but if that’s what you’d like, use
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">
<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.