Now that iPhone users can bookmark websites with webclips, they will have cute little icons on their iPhone home screens. If you are a website owner you may want to have some control over what that webclip icon looks like on your readers’ iPhones.

Apple has some directions on the iPhone Dev Center page on how to create a Webclip Bookmark Icon.

iPhone and iPod touch allow a user to save a WebClip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named “apple-touch-icon.png” at the root directory of your web server - similar to the “favicon.ico” for site icons.

To override the site bookmark icon on a specific web page, insert a element similar to within the element of the page.

The bookmark icon dimensions should be 57x57 pixels.  If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.

On Dan Dickinson’s blog he gives a solution when you don’t have access to the root folder. “If you want more flexibility - perhaps you don’t have access to the site root, perhaps you want to use a different file name or format - you can use a link tag in the head of the document”