webclip

How to: Create iPhone webclip icons

November 15th, 2008

If you have an iPhone, you will probably have came across webclip icons. Webclip icons are the icons that apear on your iphone homescreen when you bookmark a web site. It is very easy to create a webclip for your own web site. Let’s see how:

Create a 57×57 png icon with your logo or whatever you want.
Save the image as “apple-touch-icon.png”.
Upload the image to the root folder of your web site (not the root of your server, the root of your site).
Do not mind about designing a glossy icon because MobileSafari (the browser of iPhone) will create the glossy effect by itself.

You can see the webclip I created for Typpz blog on the screenshot. As I mentioned glossy effect and round edges are created by Safari, I just uploaded this image.