Create An iPhone Icon

One of the first things that I wanted to do when I got my brand new iPod Touch was create a webclip icon. It really annoys my that a lot of mainstream sites like Digg.com, Weather.com, etc. haven't bothered to create one. So, here we go.

First, start off with a 128x128 image. One of the things to keep in mind is that your iPhone is going to automatically apply some 'glossiness' to your image, so a nice flat image is ok. The other thing to keep in mind is that because it does that, you should make sure that your icon has some dark details, otherwise it might get washed out when it puts that 'glossiness' on top. Save your image as a PNG and upload it to your site.

Now, open up the pages (or if you have an include file) and add this to the <HEAD>:

<link rel="apple-touch-icon" href="graphics/webClipIcon.png" />

This will then instruct the iPhone to use that graphic when it creates a shortcut on the main screen. Save your changes and upload that, and PRESTO! you're done.