Apple iPhone/iPodTouch Web Clip Icon Sizes

Question

On Apple iPhones and iPod Touches, you specify a link to an icon file like so:

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

...but on this page, it recommends that you specify two different sizes of icon, one for iPhone < 4 and another for iPhone 4.

There is no documentation I can find that shows how to specify the two separate icons. Can anyone help?

Staircase

Answer 1

There are plenty of documentation about this on Google.

Just use:

<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>

<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>

---

As an additional info, you can have the icon without the gloss effect if you use apple-touch-icon-precomposed instead of apple-touch-icon.

and there are several tags you can use in order to have all features of Safari Mobile like splash screen, etc

also, give this Mobile Tuts article a read and you will know almost everything you need to have a brilliant web app

Astrakhan

Thanks for the answer, didn't know about the 'sizes' attribute. Google's got another good resource to look for now. Though I think the iPad should be 72 x 72 and the 'Retina' display should be 114 x 114, judging by the documentation posted in my question. – Staircase

added Mobile Tuts link with much more tags you guys can use on webapps – Astrakhan