Create Custom Apple iPhone WebClip Icons For Your Site

By Posted 2008 Updated   Apple

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.


2 comments on “Create Custom Apple iPhone WebClip Icons For Your Site

  1. Ross Lin says:

    Has anyone try to put up 128*128 or 256*256 apple-touch-icon.png? Would that be scaled down properly by different version of iPhone?

  2. jackies35 says:

    I thought they said the 256×256 is for the new iPad? Well, maybe I am wrong. I just went ahead and created the Webclip icon and it’s cool!!

    Now, how do I get everyone to use or load this on their iphone and ipod touch???

Leave a Reply

Your email address will not be published. Required fields are marked *




Next Article »
css.php