How To Create A Website Icon For The iPhone / iPod Touch

February 17th, 2008

This tip came from early-early Apple adopter JC who sent me a link to this article about how to add a custom icon to your website that appears when an iPhone / iPod Touch user saves your website.

It’s really simple — all you need is a graphic editor that can output PNG files, which is pretty much all of them out there.

1. Create your icon and make it 158 x 158 square.
2. Output it to PNG and name it apple-touch-icon.png
3. Upload it to the root directory of your web server.

That’s pretty much it. The cool part is the iPhone / iPod Touch will automatically do the rounded corner and slight glossy look for you.