Web Icon’s for your iPhone

With the recent 1.1.3 iPhone update, you can now add web clips to your home screen. Here is a nice technique you can implement to make your website’s web clip icon look like a native iPhone application! It’s really easy and looks great.

1. Simply grab your website/company logo and make it a 59px x 59px image, save it as a .png file and stick it in your website images folder (example below).

2. Add this code to your web page ‘head’ section:
<link rel="apple-touch-icon" href="http://www.yourdomain.com/images/youricon.png" />

To make the icon resemble native iPhone apps, all you need to do is add a slight gradient to the lower part of the icon. The iPhone will add the top reflection automatically.

That’s it! Now when people add your site to their iPhone home page, it will look really cool.