So with the last major firmware release for the iPhone came the ability to add Web sites to the home screen of your iPhone or iPod Touch. It is a nice feature but the fact that it almost always created these small, cropped and unattractive icons bugged me. Shortly there after when you added certain sites like Feedburner, Flickr and The New York Times you got much better looking custom icons. It was a much better solution but Apple never really the process of what you needed to do to create them public. Today one of my insane technology obsessed friends told me how so here it is:

1 - Create your icon as a 45 x 45 pixel image (You don't have to worry about the rounded edges or beveled look as the interface will add that for you). The only thing that happened with mine was that I had to put the text 2-3 pixels above center and made it a little smaller than I thought I would have to for it to appear in the middle of the home screen icon.

2 - In Photoshop go to 'Save for Web & Devices'. Set the file format as PNG-8 and turn off transparency.

3 - The file HAS TO BE saved as apple-touch-icon.png. If you call it anything but this it will not work.

There are then two options for uploading this to your site

If you can access the root level of your site all you have to do is upload the file to the root level and the phone will find and use it.

If you can not access the root level or the content has to live in a sub-folder like this blog then add this like of code after the head tag in the HTML. you can use the href to specify where the image is located even if it is another folder or server.

(open bracket) link rel="apple-touch-icon" href="http://your URL here" / (close bracket)

It is that simple.

Labels: Great resource