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.
nice tutorial! thanks for sharing 😉
Ohh, thanks for that, I was looking on how to make this for some time now! keep up
This is exactly what I was looking for, thanks.
I made mine 128×128 though. I’m not sure where I saw that, I think in an iPad icon tutorial or something.
Nice post. Thanks. it looks really great and very informative.. Keep posting.
oooh!! Thanks so much! This has helped me alot. Question though.. does it have to be .png??
@Ardham: Yes, it has to be .png (transparency needed ;-))