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.

Tags: apple, iphone, logo, mac, macintosh, mobile, safari, webclip

Posted by Nikos Typpz Filed in Apple Mac, General, Web 2.0, Web Design Tips

2 Comments »

2 Responses to “How to: Create iPhone webclip icons”

Antonis Says:
November 16th, 2008 at 5:52 pm
nice tutorial! thanks for sharing
melin aureio Says:
November 16th, 2008 at 6:07 pm
Ohh, thanks for that, I was looking on how to make this for some time now! keep up