Create Custom Apple iPhone WebClip Icons For Your Site

Have you spotted those glossy rounded icons on the Apple iPhone?  Often called web clip bookmark icons, now webmasters can create their own custom icons for iphone (and iPod Touch) and link them to display on these gadgets. Here is how you can display a custom iphone icon for your site…

Custom Apple iPhone Webclip Icons

Apple Iphone Webclip IconsFirst you need to upload a .PNG image named apple-touch-icon.png in the root directory of your server. This image can then be linked within your site html <HEAD> tags like this

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

But if you named the image as apple-touch-icon.png and placed it in the root, the iphone will automatically detect it anyway, even without this link tag.

Apple specifies that the image needs to be 57×57 px in size with 90 degree corners and no gloss or shine. The iphone will then round the edges, add the characteristic glossy button finish to it and drop a fine shadow. The iphone (or iPod Touch) will then source this image whenever they link to your website.

Its a cool idea upload you own webclip icon and get them to display on Apple iphones and Ipod Touch. Have you created a webclip icon for your site?

The Apple Iphone 3G is launching today in many countries, though in India the iPhone will release on Airtel and Vodafone later in the year. Did anyone grab the QOT web clip on their iPhone? Show us a snap.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.