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