With the latest release of the iPhone and iPod touch firmware, users can now save webclips (bookmarks) directly to the home page of their device. When they do this, an icon is shown that represents your webpage. If you like, you can control the icon that is shown using a mechanism that is similar to the favicon mechanism used in web pages.

First you need to create an icon, and it needs to be in the PNG format. Don't worry about the glass effect on the icon, the iPhone or iPod touch will add that. The icon will eventually get scaled to 57 x 57 pixels, so you should create an icon at least this big. If it's bigger, that is fine since the iPhone or iPod touch will scale it down. But you don't want them to scale the icon up in size since this usually leads to a pretty ugly looking icon.

Once the image is created, there are two options for delivery/notification. The easiest thing to do is to name the icon apple-touch-icon.png and put it in the root directory (same as the favicon file).

The second option is to add a line to the head section of your page that looks like so:

<link rel="apple-touch-icon" href="/path/file.png"/>

where you replace the contents in the href to match your file path and file name. This is a more generic mechanism more in keeping with the way that favicons are handled, but it does require you to add something to your page.