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!

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply