Everything you always wanted to know about touch icons

Published 2nd March 2011 · tagged with HTML, iOS, performance

“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I’m sure you already know how this works using HTML:

<!-- In its simplest form: -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

(It’s a shame Apple didn’t just implement the standard <link rel=icon> and chose to come up with a more verbose proprietary link relation instead.)

Apple iOS has supported touch icons since iOS 1.1.3. What’s weird is that Android 2.1+ also has apple-touch-icon support (with a few quirks).

For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available.

Fancy effects

iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons). Specifically, iOS adds:

Rounded corners
Drop shadow
Reflective shine

As of iOS 2.0, you can prevent the addition of these effects by using the precomposed keyword:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Since the rel attribute accepts a space-separated list of values in HTML, theoretically it should be possible to fall back to the regular icon with added effects for iOS 1 without requiring an extra <link> element:

<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">

In practice, however, it doesn’t work that way. iOS 4.2 seems to ignore the entire declaration if you’re using the space-separated value technique.

I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.

Different icon sizes

The Web Clip Icons section in the iOS HIG states that for iPhone and iPod Touch, you should create the following icons:

one that measures 144 × 144 pixels for high-resolution iPad ‘Retina’ displays;
one that measures ~~114 × 114 pixels~~ 120 × 120 pixels (see note below) for high-resolution iPhone ‘Retina’ displays;
one that measures 57 × 57 pixels for everything else.

For iPads without a high-resolution display (the first two generations), a 72 × 72 pixel icon can be used.

Update (June 2013): As of iOS 7, the recommended touch icon size for Retina-display iPhones went up from 114 × 114 pixels to 120 × 120 pixels. This post has been updated to reflect that.

It’s perfectly possible to just create one high-resolution icon and use that for all devices. In fact, this is how Apple does it. Devices with smaller screens or lower display resolutions automatically resize the icon. The downside is that these devices load the large high-quality image, while a much smaller file would have worked just as well. This wastes bandwidth and affects performance negatively for the end user whenever the site is added to the home screen.

Luckily, as of iOS 4.2 it’s possible to specify multiple icons for different device resolutions by using the sizes attribute:

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

A few simple rules apply here:

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used.
If there are no icons larger than the recommended size, the largest icon is used.
If multiple icons are suitable, the icon that has the precomposed keyword is used.

But it gets more complicated. Pre-4.2 versions of iOS simply ignore the sizes attribute, so the above code snippet would be interpreted as:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">

Only the last value in the document will be used on those systems. In this case, that’s the largest icon. Depending on how you look at it, it might be better to reverse the order of icons:

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

This way, older iOS versions download the smallest icon instead of the largest one. So, instead of forcing the largest icon to all devices unless they support the sizes attribute (iOS 4.2+), we now serve the smallest icon unless @sizes is supported. In other words, we’re now using progressive enhancement instead of graceful degradation :)

When in doubt, always use this snippet. With support for nearly all iOS versions and devices, and as many different Android versions as possible, it’s the most robust way to add touch icons to your site.

I’ve had several people test this on a Nexus One running Android 2.3 (Gingerbread), and it seems @sizes is not supported there either. However, it behaves differently than old iOS versions: instead of using the last <link> element’s @href value, it will use that of the first <link> element with rel="apple-touch-icon" or rel="apple-touch-icon-precomposed". In the case of the above code snippet, that’s the largest icon available.

Update (March 2013): I crowdsourced some more tests on Android devices. Using the suggested snippet, Android 4.1.x and 4.2.x on Galaxy Nexus both get the 57×57px icon as long as the default Android browser is used to add the bookmark. ~~Bookmarking from within Chrome causes the touch icons to be ignored.~~ This is fixed in Chrome 27. The bug is also present on Samsung I9100 Galaxy S II devices running Android 4.0.x.

Look ma, no HTML!

If no icons are specified in the HTML, iOS Safari will search the website’s root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

That’s right — for iOS, it’s not necessary to use HTML to add touch icons to your site, even if you want to use multiple resolution-specific icons. Say adiós to the boatload of proprietary <link rel="apple-touch-icon"> elements on every single HTML page. Just create different versions of the icon, use the correct file names and place them in the root. (favicon.ico, anyone?)

So, what do we need?

apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch;
apple-touch-icon-72x72-precomposed.png or apple-touch-icon-72x72.png for the first- and second-generation iPad;
~~apple-touch-icon-114x114-precomposed.png or apple-touch-icon-114x114.png for iPhone 4+ (with Retina Display) on iOS ≤ 6~~
apple-touch-icon-120x120-precomposed.png or apple-touch-icon-120x120.png for iPhone 4+ (with Retina Display) on iOS ≥ 7
apple-touch-icon-144x144-precomposed.png or apple-touch-icon-144x144.png for iPad 3+ (with Retina Display);
apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).

It’s a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility: iOS 1 and BlackBerry OS6 don’t support precomposed icons. (Note that Android 2.1 only supports precomposed icons.) You could use rewrite rules to avoid having to duplicate the file.

Sadly, the no-HTML approach doesn’t work on the native Android browser (tested in 2.3 Gingerbread, 3 Honeycomb, 4.1 Jelly Bean), although I’ve had reports saying it does work in and 4.2 Jelly Bean’s default browser. I haven’t been able to test BlackBerry OS6 yet. If you want, you can test this technique on my website. Save a bookmark to this page to your home screen, and see if you get a custom touch icon or not. Please let me know what you find out!

Summary

So, which technique to use? It all depends, really.

If Android support is a must, you’ll have to use HTML, and I’d recommend using the last code snippet under the “Different icon sizes” section.
If iOS is all you care about, I strongly suggest using the no-HTML approach.
If you’re lazy and don’t really care about Android, legacy iOS versions, or performance, I suppose you could just use a single 144×144 icon, name it apple-touch-icon-precomposed.png and place it in the root of your website.

Comments

Alex Gibson wrote on 3rd March 2011 at 10:11:

Nice write up — one other platform to add to the equation: BlackBerry (OS6) also supports apple-touch-icon (although it appears not to support precomposed)

More info here: http://supportforums.blackberry.com/t5/Web-Development/Adding-WebSite-to-Home-Screen-Icon/m-p/568119

Also, I believe Firefox Mobile supports touch icons too (it displays them more like a favicon, in the top left of the browser window).

Mathias wrote on 4th March 2011 at 10:38:

I should probably add that I researched the use of media queries to serve different touch icons based on the device’s screen resolution. The code looks like this:

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="apple-touch-icon-114x114-precomposed.png">

Based on my tests, this doesn’t work correctly. The iOS devices I tested on — iPad, iPhone 3G S and iPhone 4 — were all running iOS 4.2, and they all just used the first touch icon referenced in the HTML. The media queries didn’t seem to matter; the order of <link> elements in the source did. Really weird.

Update: Looks like this has finally been fixed in iOS 5. It also works for startup images now:

<!-- 320x460 for iPhone 3GS -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone.png">
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone4.png">
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="startup-iPad-portrait.png">
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="startup-iPad-landscape.png">

Brajeshwar wrote on 10th March 2011 at 04:32:

Your screenshots have a different interface. Lion!

Björn wrote on 10th March 2011 at 13:23:

Thanks for the great article. In my project I have been using JavaScript and user agent detection (ugh!), to build the link rel="apple-touch-icon" dynamically.

I will rip it out and replace it with this.

Ric wrote on 10th March 2011 at 14:54:

Looks like a bit of a messy system to me, I guess scanning the root is okay. But if we add these link tags, the IE9 meta tags etc etc we'll soon have a 1000 line head block!

Kroc Camen wrote on 13th March 2011 at 14:49:

Using rel="apple-touch-icon apple-touch-icon-precomposed" (or vice-versa) does not work in iOS 4.2 (and likely before), it ignores the whole declaration, so you must put composed and precomposed on separate LINKs.

Mathias wrote on 13th March 2011 at 15:33:

Kroc: Thanks for testing that out. I’ve amended the article with a link to your comment.

DanielGoransson wrote on 19th March 2011 at 04:49:

Opera 11.10 supports both apple-touch-icon and precomposed for its Speed-Dial feature. Minimum of 114×114px, else it’s ignored. Maximum of 260×195px else it will be resized to max.

If more than one icon is available, Opera uses the largest; if multiple icons with the same size are available, Opera will use the first one in the HTML. http://dev.opera.com/articles/view/opera-speed-dial-enhancements/

Tony Lukasavage wrote on 24th March 2011 at 18:12:

I recently did a post expanding on the listing of necessary icons and images for mobile apps, you might find it useful: http://savagelook.com/blog/android/mobile-developers-icon-image-checklist

David wrote on 22nd April 2011 at 18:06:

Great article. One thing I’m trying to find is if it’s possible to change the URL associated with the icon? For instance, if an icon is added from my homepage can I control what page the icon opens?

Mathias wrote on 22nd April 2011 at 19:20:

David: No, that’s not possible. It will always bookmark the current page. I can imagine the opposite would be confusing ;)

Steve wrote on 10th May 2011 at 01:36:

I got nothing on my Nexus S running 2.3.4... But I'm not sure I set the link up right. I might have another play later.

Anselm H. wrote on 10th May 2011 at 11:37:

Hi, what about behavior of devices if these icons are in root directory (and don't need to be linked)? Is it the same? Or do they choose the right then?

Thanks a lot for answering… -A.

Mathias wrote on 10th May 2011 at 11:40:

Anselm H.: I don’t think you read the “Look ma, no HTML!” section of the article. All your questions are answered there.

Anselm H. wrote on 10th May 2011 at 11:42:

Sorry. You’re right, thanks.

Oliver wrote on 10th May 2011 at 12:56:

Great overview, thank you!

Zev Goldberg wrote on 31st May 2011 at 22:18:

With the last W3C validator update, apple-touch-icon no longer validates as a registered rel value.

http://zevbrokeit.posterous.com/relapple-touch-icon-no-longer-validates

Mathias wrote on 31st May 2011 at 22:39:

Zev: apple-touch-icon never was a registered rel value; it was never really valid. The only thing that changed is the validator, which now explicitly marks invalid link relations as validation errors.

The same goes for shortcut; however, that one quickly was registered after the recent validator.nu update.

Anyhow, I think we can all agree that it sucks having to use invalid markup just to get touch icons to work on most devices. I’ll repeat what I wrote in the article:

(It’s a shame Apple didn’t just implement the standard <link rel=icon> and chose to come up with a more verbose proprietary link relation instead.)

Zev Goldberg wrote on 31st May 2011 at 22:55:

Arrgh. I see that now.

Of course, I'm not even an Apple person, and I don't wish them to write the spec with their non-semantic name all over it. But I am a firm believer in the spec being written to follow the cowpaths. If they (and also Android) have the browsers to support it, shouldn't we push to have apple-touch-icon registered as well?

Mathias wrote on 1st June 2011 at 19:41:

Zev:

If they (and also Android) have the browsers to support it, shouldn't we push to have apple-touch-icon registered as well?

It seems weird to standardize anything that has a vendor name in it (at least to me). But then again, shortcut got registered as well, so why not.

I’ve registered rel=apple-touch-icon now.

Henri Sivonen wrote on 3rd June 2011 at 16:22:

Mathias:

Why only apple-touch-icon why not apple-touch-icon-precomposed, too? I don’t have an iOS device here, so I can’t tell if it actually works as a rel value or if it only works as a magic file name. Apple’s docs kinda suggest it works as both. (Why did they make file names magic anyway?)

Mathias wrote on 3rd June 2011 at 16:27:

Henri: In my excitement I had simply forgotten to register apple-touch-icon-precomposed as well. Fixed now. Thanks for the reminder!

George wrote on 6th June 2011 at 23:10:

I started seeing queries in my server logs for these PNG files even though I don’t have them on my system, nor do I have any links to them in any of my HTML files. LOL. So I added a soft link for apple-touch-icon.png to some 50 MB file on my system. Anythying that does a GET on a web server without first finding that filename in a parent HTML file deserves whatever it gets.

Mathias wrote on 7th June 2011 at 10:30:

George: Well, you’re wasting bandwidth too.

meleyal wrote on 29th June 2011 at 17:03:

iOS appears to to always add rounded corners and drop shadow, whether the icon is precomposed or not.

Ajay wrote on 20th July 2011 at 17:47:

Is there any way to define custom text for the Home Screen icon? At the moment, it uses the page title and truncates it. My page title has a bit of descriptive text in it too for SEO purposes, but i'd like that to be removed for the Home icon.

I cant find any answers that say this is possible.. yet..

Luke wrote on 27th July 2011 at 17:34:

Hi, great post. Is it possible to have a different web page title for Add to Home Screen, so it’s shorter? Without using some JavaScript to check. Thanks.

On browsers I’d like the proper webpage title, and a shorter version if they add to home screen on iOS device.

Mathias wrote on 27th July 2011 at 18:24:

Ajay and Luke, as far as I know this is not possible (yet).

TSTRDRD™ wrote on 18th August 2011 at 02:50:

Just what I was looking for to get the ‘shine’ effect off of my icon. Thanks a lot!

Carl wrote on 18th August 2011 at 15:10:

Thanks, we were seeing a lot of 404s for these files in the logs, this sorts that out.

Robert Fauver wrote on 20th August 2011 at 20:33:

I love the fact that there is an nonHTML version. Thanks for sharing!

Brian French wrote on 3rd October 2011 at 21:26:

I tested your no-HTML approach in Android 3.2.1: Home screen bookmark to this page is a custom touch icon.

ToyChicken wrote on 11th October 2011 at 11:28:

Does anyone know if there’s any problems serving these icons from a shared domain… Just trying to save some bandwidth :)

David Calhoun wrote on 18th October 2011 at 19:58:

Just a heads up — it looks like touch icons in a password-protected directory aren’t accessible (tested on iOS5). This make sense, as the icons are requested by the system, not the browser (where a user may have typed in a user/pass).

Kristen Grote wrote on 21st October 2011 at 21:57:

Hey Mathias,

Great writeup! Just thought I should let you know that I saved this page on my HTC Thunderbolt running Android 2.2.1 and I only got Android’s default bookmark icon.

Before reading this article, I was messing around on another site of mine, and I placed my apple-touch-icon.png file at the root, and removed the link to it from the site’s <head>. This caused the site icon to appear inside Android’s default bookmark icon. Whether it was the favicon or the apple-touch-icon being used, I don’t know. I’ll do some further testing if I have time and let you know.

Harri Hälikkä wrote on 22nd October 2011 at 17:04:

Ah, what a great mess this relatively simple thing is. Thanks for the excellent writeup!

One additional note: the default browser of the recently announced MeeGo-based Nokia N9 (and N950) device is able to add sites to application grid as well, but doesn’t support the -precomposed version. So, apple-touch-icon.png is needed to make the site play nicely together with this device. the icon can be just placed to the root of the site, no need to add a link to it in the <head>.

And to confirm, yes, this current page works well with N9, the icon is shown as it should be.

Apparently even sites such as m.twitter.com or touch.linkedin.com can’t get this right — it’s a bit frustrating.

Mike Cowles wrote on 3rd November 2011 at 19:18:

Hey,

I'm running into a brick wall with this.

I have a HTC EVO and put an icon at http://mikecowles.com/apple-touch-icon-precomposed.png in the root and in the folder of the mobile version I’m working on at http://mikecowles.com/mobile/apple-touch-icon-precomposed.png. I made it the lazy 114px size and have tried bookmarking the site and always get the default red ribbon with the star, icon.

Can you offer any help?

Thanks very much! =]
Mike. <><

Mathias wrote on 4th November 2011 at 08:31:

Mike: It’s working fine here.

betovarg wrote on 6th November 2011 at 19:06:

By far, the best touch icon tutorial I've found. Saved my life with the reverse order, thats a must tweet tip.

thanx!

Kevin wrote on 30th November 2011 at 08:42:

George: That’s an awesome idea. If my personal site kept on getting those requests I’d totally do it too. Sadly I don’t think it would go over well if I did that on a customer’s site.

Red Feet wrote on 5th December 2011 at 13:37:

Ajay: Yes, a shorter title, different from your descriptive/long SEO title is possible:

<title>Long SEO title</title>
<script>
  document.title = 'Short display title';
</script>

Luke: No, without JavaScript it’s not possible, but how many iOS users disable JavaScript?

Dries wrote on 9th January 2012 at 13:59:

Mike: I’m having the same issue on my website when testing with my HTC Sensation. The fact that it works for Mathias makes me think that HTC Sense ignores apple-touch_icon.png while stock Android does recognize it.

iDGS wrote on 26th January 2012 at 21:39:

Red Feet: Oo! Thank you! That’s exactly what I was looking for! Namely, a way to control the name given to the Apple Touch Icon that gets saved to the iOS desktop, while keeping my longer, carefully crafted title for SEO! Yes, I still wish I could set the ATI name directly, and thus keep and show my homepage title of choice. However, in the meantime, this is a compromise I can live with.

@Mathias: Maybe put a mention of this title-trickery gem up in the main text? I confess I was about to skip the comments and continue searching elsewhere. Glad I kept reading!

The Blogger wrote on 26th January 2012 at 23:24:

Can I remove the !-- tags?

Mathias wrote on 27th January 2012 at 05:37:

The Blogger: Sure, they’re just comments.

Sonya wrote on 31st January 2012 at 21:09:

Ajay: I, too, wanted to have a different page title assigned just for instances of homescreening in iOS and I found the solution online — works perfectly: http://studiohyperset.com/itouch-home-screen-short-title/2337

Sascha Hendel wrote on 1st February 2012 at 10:10:

A note about transparency: if you use PNG images with alpha channel (transparency) iOS will make them opaque and use a black background instead. This happens even if you use the precomposed option!

Android supports (as far as I tested) transparency on precomposed icons (maybe on normal icons, too). You can create really nice icons with transparency on Android, because the OS does not insist on this boring rounded edge button style.

Right now I’m trying to set up a line of <link> tags with different parameters, to provide iOS with an opaque version (because I don’t want black background) and a transparent version for Android…

Sonya: A note about changing the page title with JavaScript — be careful with manipulating the page title this way. Google and other search engines could interpret this as bad SEO.

James wrote on 1st February 2012 at 18:45:

No matter what I've tried I cannot get these icons to show on my HTC Sensation. I always get the red ribbon bookmark icon. Has anyone been able to get past this on this phone?

iDGS wrote on 8th February 2012 at 20:49:

Sonya: Ooo! Lovely script refinement! And that Unicode-escape demo is a nice touch. Many thanks! (For a few additional usage notes, see comments "over yonder." )

Martin wrote on 17th February 2012 at 18:44:

Great article. It helped me figure out how to implement the precomposed versions of web clip images. Thanks

Todd M. wrote on 20th February 2012 at 14:33:

Great stuff. Been looking into the best route/order to place this. I think I prefer the HTML route though.

rstuppi wrote on 13th March 2012 at 06:58:

I just downloaded HTML5 Boilerplate, unzipped it and copied it up to my website without any modifications, and favicon did not show. I tried it in IE9, FF, Opera, and Safari. Nothing. Granted, I am in a shared environment at Network Solutions and maybe they are doing some caching but this was a brand new website. I was very disheartened after watching 2 1/2 hours of HTML5 Boilerplate videos only to find that what seems to be basic web functionality (favicon?) did not work. What am I not understanding, what am I missing?

Christian wrote on 16th March 2012 at 16:25:

It’s worth pointing out that Reeder, a popular Google Reader client, takes apple-touch-icons even further: its non-Retina icons are 157×157px, so its Retina icons are 314×314; that’s the size I serve up, and it scales down fine.

Joshua wrote on 30th March 2012 at 23:07:

Does anyone know how to control the title when a person adds the icon to their screen?

Mathias wrote on 30th March 2012 at 23:14:

Joshua: The <title> element is used for that. There’s no event that fires when the user adds the icon to the homescreen, so there’s no way to change it only when needed. You might be interested in comment #41, though.

Rob wrote on 23rd April 2012 at 06:32:

Saving this page to the home screen on Android 4.0 (on Asus Transformer TF101) produces a nice custom icon (white ‘m’ on the green squares).

And unfortunately a title truncated part way through the second word.

So no real need to use the rel= links soon (maybe now), the older Androids that use them will fade away.

Guillaume wrote on 10th May 2012 at 16:13:

Hi @Mathias, nice post.

I haven’t found all I was looking for. I added two <link> tags in my <head>:

<link rel="apple-touch-startup-image" href="/images/Apple/apple-touch-startup-image.png" />
<link rel="apple-touch-icon" href="/images/Apple/apple-touch-icon.png" />

And that’s just working great client-side. But in my server log I’ve got several 404 not found errors that are very resource-consuming for me: looking for /apple-touch-icon-72x72-precomposed.png, /apple-touch-icon.png, etc… All you described in you “No HTML” section. Is there a way to avoid Apple to look for all versions if I do not want to provide them and reduce the 404 errors?

Thanks a lot for your answer :)

Mathias wrote on 17th June 2012 at 11:24:

Ajay and Joshua: you might be interested to hear that iOS 6 Safari will allow you to set a separate title just for the home screen, using the following HTML:

<meta name="apple-mobile-web-app-title" content="Short title for home screen">

Drew wrote on 28th July 2012 at 03:29:

Is it possible to use a combination of the link method and WebKit implementations at the same time? It appears the wrong size image is being picked up on my Samsung Galaxy SII using the link method.

You can see it here: http://www.whatsitworth.net/

Jack wrote on 30th July 2012 at 03:34:

I am trying to create a custom icon for an imbedded web server. Think the web server may serve up the pages slightly differently than a traditional server and the pages don’t live on the server as a traditional html file. They are created on the fly when they are requested. I have spent all weekend trying to get this to work and would just give up and say it wasn’t possible except for the fact I can get it to work on an iPhone 1 (IOS 4.2.1).

I can not get it to work on and iPhone 4, or iPad 1 or iPad2 (IOS 5.1 and OS 5.1.1).

To get the iPhone 1 to work I had to place the apple-touch-icon.png file in the images folder (it did not work in the root or any other folder). In an attempt to get it to work on the other devices I have tried the file in every folder on the server. I also modified the file that generates the html on the fly to include in the <head> tag:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" >
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png">
<link rel"apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3.png">

I created the different size png files and tried them in a bunch of directories. I have also tried it with an absolute path to the .png files.

I can put the code and files on a traditional server and get them to work on all devices. I cant figure out why it work on the iPhine 1 and not the other devices Is it the IOS version, screen resolution, etc.

Any ideas?

Ryan wrote on 6th October 2012 at 20:41:

All this SEO mythology is bunk anyway. Just optimize for humans and let Google do its job.

SlavD wrote on 7th October 2012 at 14:35:

Great post. I wish they made it more standard. I’m currently trying to set it up on my site, however I’m still getting wrong sizes and sometimes I’m getting requests to / root of the website even though all my pages reference .png images from relative path.

I wonder if it is caused by someone bookmarking it on the device?

Anyway thanks for the post.

Mogens Beltoft wrote on 19th October 2012 at 11:30:

Is it possible to use data URLs to have the apple-touch-icon encoded as text?

Paul Rouget wrote on 20th October 2012 at 16:35:

That’s some serious work here. Thank you for doing that.

Chris Surtees wrote on 31st October 2012 at 21:59:

Is it possible to have different iOS icons for different domains?

i.e.

yourwebsite.com/domain1 = iOS icon 1

yourwebsite.com/domain2 = iOS icon 2

yourwebsite.com/domain3 = iOS icon 1

Mathias wrote on 1st November 2012 at 12:44:

Chris: I think you mean “paths” instead of domains. Anyway, yes it’s possible to define different icons for different resources on the same host, by using the HTML snippet mentioned in this post.

Roy wrote on 7th January 2013 at 07:55:

This adds a good update to your post: http://www.zen.co.uk/blog/setting-a-home-screen-icon-for-your-website-on-ios-and-android-devices/

I guess if you do not care about force-feeding a larger icon to smaller devices, this two line code version might just be all we need now in 2013.

Loiseau2nuit wrote on 18th January 2013 at 17:47:

Thanks a lot for that useful tip.

I was wondering if it was ever possible to replace all those PNG files by a single one .svg which would then be called by all the declaration as well.

I.e.

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-precomposed.svg">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-precomposed.svg">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-precomposed.svg">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.svg">

I must admit that I’m still not familiar enough with all those devices (and with Raphael.js either ^^) to answer this today?

Thanks again and gr33tz from one of your downstairs french neighbour ;)

Saeid wrote on 24th January 2013 at 06:56:

I noticed that Apple link in your article takes us to an icon that is 129×129px. That’s not the recommended dimension, is it? How come?

Mathias wrote on 24th January 2013 at 08:56:

Saeid: Apple has had that 129×129px icon there since the first version of iOS that supported adding websites to your home screen. That was on the first-generation iPhone.

Back then it was probably forward-thinking to offer a higher-resolution icon. I guess they never got around to updating it afterwards, or they didn’t feel the need.

Paul wrote on 2nd February 2013 at 20:45:

Thank you/ Dank je wel/Danke/ Merci, for the informative details.

It seems bonkers that once again, just like Micro$oft always does, another software organisation has broken world standards, and most people have not objected.

Adam wrote on 5th February 2013 at 17:17:

Great post! Please add instructions for Windows 8/IE 10 tiles images.

Mathias wrote on 7th February 2013 at 15:30:

Adam: Windows 8 tile images aren’t exactly “touch icons”, in the same way touch icons aren’t favicons. (It would be nice though if browser vendors could just decide on a single format!)

But since you asked: you’re probably looking for Microsoft’s Build My Pinned Site tool. The generated code looks something like this:

<meta name="application-name" content="Your website title">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="e9060f3d-e554-42c0-8ada-e614687fcdac.png">

Michael wrote on 20th March 2013 at 10:12:

Android browser testing with HTC Thunderbolt on Android 4.0.4:

Dolphin = failure
Firefox = success
Chrome = failure, uses modified favicon
Default Android browser = failure

Tom wrote on 3rd April 2013 at 12:11:

Just tried it with a Samsung Galaxy SIII (4.0.4) and default browser. It just shows the favicon inside the red ribbon. Tried it for this site and some other sites like apple, bbd, etc. Anything we can do about that?

Joel_MMCC wrote on 5th April 2013 at 21:42:

On the matter of shorter vs. longer web page titles, it looks like the HTML spec itself allows for this already, without needing anything new added to the spec, and requiring absolutely no proprietary vendor metatags (e.g. Mathias’s <meta name="apple-mobile-web-app-title" content="Short title for home screen"> above).

It’s so simple! According to the HTML 5 spec (and I believe HTML 4 as well), the title="…" attribute is a global attribute that can be used with any HTML tag! That includes the <title> tag itself!

So, hypothetically, you could do this:

<title title="Long SEO-friendly overly verbose page title goes here">Short title here.</title>

Voila! This should even validate nicely, as-is!

Now all that’s needed is for user agents (browsers and spiders) to decide what to do with that. I recommend a “smart” approach: For touch icon titles and the like, always use the shorter title that is the inner content of the <title> tag.

For browser window titles, likewise display the inner content of the <title> tag if the browser window is too narrow to display the longer one in the title="…" attribute (e.g. portrait orientation, manually reduced in size, etc.).

Search engines can simply use both as they see fit for their metadata and rankings.

There’d also be no reason that the two couldn’t be swapped (longer title as the tag’s inner content, shorter as the title="…" attribute, instead of vice versa) and have the user agent simply react intelligently based on which is longer and which is shorter, but traditionally the title="…" attribute is used to provide longer descriptive text for some usually shorter or smaller element via a ToolTip (e.g. for <img>, <a>, <abbr>, <acronym>, etc. tags), so that should be the preferred usage.

Steven Reid wrote on 26th April 2013 at 01:13:

Good and revealing writeup — I was interested as sizes was causing my page to be invalid — I’m somewhat picky. It’s interesting to note that there’s no real advantage to having the various icon sizes other than what the user has to download and I have to ask — are we really that bothered about a few KB? The difference between my largest and smallest icons is 5 KB. So I don’t think it’s fair to call resorting to one icon on the server with no HTML as being ‘lazy’; I think it’s extraordinarily practical and certainly the route I’ll be taking from now on!

Joel C. Salomon wrote on 29th April 2013 at 21:17:

Does anyone know whether Android or iOS care about the file name (if I’m not using the “Look ma, no HTML!” method)? I.e., can I have something like this

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/toy_rocket-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/toy_rocket-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/toy_rocket-72x72.png">
<link rel="apple-touch-icon-precomposed" href="/toy_rocket-57x57.png">

and expect it to produce the correct icons?

KM wrote on 4th May 2013 at 10:12:

Does anyone know of any site which can preview what a touch icon would look like when displayed on iOS — don’t have access to any iOS/Android device, but want to see what the icon would look like after it has the rounded corners, shadow and reflection added to it by iOS.

Mathias wrote on 4th May 2013 at 14:43:

KM: Try using the iOS Simulator or the Android Emulator.

KM wrote on 4th May 2013 at 16:59:

Mathias: Thanks. Guess I’ll have to see if I can get the Android Emulator working, but that seems a lot of hoops to jump through just to look at an icon! I’m just wanted to add a simple icon to a website, as I’m getting “404 not found” errors in my log files from devices requesting these icons. Just wanted something quick and easy to be able to see what the end results would look like.

I’m using a Windows system, so can’t use iOS Simulator (unless I also want to start trying to build a virtual system with a hacked version of OS X on it etc).

There are a lot of sites that say they help you create these images, but none seem to offer a preview of what the results would actually look like when viewed on an iPhone etc.

@troopaty wrote on 22nd May 2013 at 06:12:

Android browser Firefox testing with HTC Thunderbolt on Android 4.0.4: success.

JH wrote on 28th May 2013 at 21:39:

KM: Slow and choppy but shows your home screen icons for different Android builds/screens: https://www.manymo.com/emulators.

Comment on “Everything you always wanted to know about touch icons”

Name *

Email *

Website

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!"); /* his suicide note
                                 was in C */

Alternatively, you could use triple backtick syntax:

```
printf("goodbye world!"); /* his suicide note
                             was in C */
```

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.

Spammer? (Enter ‘no’) *

Mathias Bynens