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?

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