This one is pretty simple:
Step 1: download the file format so you can save your icon file (.ico) in photoshop www.telegraphics.com.au/sw/product/ICOFormat
Step 2: www.luscarpa.com/development/make-your-website-an-iphone-web-application/
Add these to the header.. routing to the appropriate file directory name
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”apple-touch-icon” href=”/apple-touch-icon-iphone.png” /> ****<–NOTE: that is 58x58px, for old iphone***
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-touch-icon-iphone4.png” />
<link rel=”icon” href=”favicon32.png” sizes=”32×32″ />
<link rel=”icon” href=”favicon48.png” sizes=”48×48″ />
<link rel=”icon” href=”favicon64.png” sizes=”64×64″ /> «
Basically i started with a 114px image, and resized it down each time in Photoshop and resaved for web to make the new files.
The favicon.ico is a 32x32px file.. same as favicon32.png just saved as .ico (you do a regular save as for this, not save for web).
NOTE: Apple will automatically add a shiny 3d bevel to it and give it rounded corners, you just upload a normal square image.
If you don’t want the glossy surface look applied, you add “pre-composed” like here:
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”/apple-touch-icon-iphone4.png” />
Upload all the files, test it out in your iPhone’s Safari browser by Adding your site to the Home Screen and you’re done!
Deutsch