Make Favicon / iPhone iPad Web App Icons for Your Site

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!

Leave a Reply