The latest iPhone and iPod Touch updates brought us a new feature called WebClips.  Basically, you can save a web page, or a part of a webpage to the iPhone/Touch home screen.  It’s a very convenient way to save websites you visit often.  If a website does not have a specific WebClip icon then it will take an image of part of the site and use that.  Well, creating your own custom icon for your website is pretty easy, so I wanted to tell you how to do it.

  1. Create your icon using your image editor of choice.  The image must be 57×57 and be in the .PNG format.
  2. Name the image “”apple-touch-icon.png”.
  3. Upload the file to the root directory of your website.

That’s it!  When you add the icon to your home screen it will automatically be updated with the “glass” overlay to make it match the rest of the icons on the screen.

To see an example, go to my page and create a WebClip of it.