The latest firmware update for the iPhone and the iPod touch allow you to add direct links to websites to the home screen; you can see a demo of this at Apple's site. It's possible to design custom icons for these sites for these devices to pick up, a bit like a favicon; if no such icon exists on the site's server, the device will create one by taking a snapshot of the webpage, but this usually looks a bit ugly.
Adding custom icons is easy; all you have to do is create a square graphic, save it as a PNG file with the name apple-touch-icon.png and upload it to the root directory of the website. The iPhone will then see it, load it, and apply some effects to it to make it look all glossy and Apple-y. Here's how.
Apple's tech docs suggest creating a square graphic 57x57 pixels in size, but better results seem possible by designing bigger graphics; the iPhone will scale down larger ones anyway. I did MacFormat's at 128x128 pixels, for the vaguely spurious reason that it's the standard size for OS X icons, and so I could always reuse my icon elsewhere.
If you supply an irregularly-shaped image, the iPhone will simply add a black background, so it's worth deliberately creating a flat graphic. A suggestion: create a gradient that goes from a darker, deeper version of your chosen colour at the top to a lighter version at the bottom; when the iPhone adds its gloss to this icon, it will look really rich.
Add your site graphic, remembering that the simpler the better; a slight drop-shadow might help give it some definition. Another tip: leave a more generous margin around your graphic than you might otherwise, or your icons might look a bit crowded by the time it appears on the iPhone.
Finally, upload the apple-touch-icon.png file to the root directory of the website.
Here's the graphic used for MacFormat...
![]()
...and a shot of how it looks on the iPhone after it has automatically applied the rounded corners and gloss.
![]()
And remember that you can always check what other sites have done with theirs; simply add /apple-touch-icon.png to the main web address to take a peek. Here are a few that I've spotted.
http://m.newsgator.com/apple-touch-icon.png
http://www.apple.com/apple-touch-icon.png
http://iphone.facebook.com/apple-touch-icon.png
http://www.guardian.co.uk/apple-touch-icon.png




