One popular feature of the iPhone is to add a website to your home screen for easy access. The icon by default is a browser shot of the website you are adding. However, it's possible to create a custom icon. Here's how to do it.

First you need to create a PNG file that is 129 x 129 pixels. (formerly, the size was 45 x 45 pixels). With release of iPhone 4, the high resolution icons are recommended.

Example:

The first way to tell the iPhone where to find your icon is simple. Once you create your icon, name it apple-touch-icon.png and drop it in the root of your site via FTP. iPhone will automatically check for this png file when it bookmarks the site.

If you'd like to put your icon elsewhere, simply put the PNG in any folder you want on your website, and add a tag with the path of the icon. Put this tag in the head section:

<link rel="apple-touch-icon" href="/public/images/apple-touch-icon.png" />

NEW! If you don't want iOS to add the glare to the icon, use apple-touch-icon-precomposed instead.

<link rel="apple-touch-icon-precomposed" href="/public/images/apple-touch-icon.png" />

Note: you can name the image whatever you want, as long as it's a png and you specify the path in the href attribute.

Follow Forging Destiny Studios on Twitter for tips, resources, and more.