Custom iPhone web clip icon - how to

Yesterday’s MacWorld contained a few little gems of information in addition to the fabulous MacBook AIR announcement. What a great name, I bet Adobe were kissing Apple for bringing even more attention to the word AIR. Personally I’m not going to be queuing up for the MacBook AIR as I only run one machine, my MacBook Pro. Its getting on a bit now and is due for an update however I think I will wait for the 45nm chipsets and the integration of the new multi-touch trackpad before I invest in another Apple notebook, it needs to be a bit more of a work horse.

Apart from our friends at Apple wanting to charge a staggering £12.99 for a firmware update for my iPod Touch ( daylight robbery if you ask me ! ), I am really impressed by the introduction of webclips for the iTouch and iPhone. Basically you can zoom into a webpage using mobile Safari and then save it as a web clip, an icon appears on your home screen for easy retrieval of your clip. According to Apple’s iPhone webapps page the homescreen can contain up to nine different web clips. This is a great bridge between the web and the convenience of a desktop shortcut, I see it as a small step towards something like Adobe AIR on a mobile device.

So this site now has an icon that the iPhone will use if anyone makes a web clip out of my site.

My icons is shown below:

If you need to override the bookmark on a specific page it’s possible by placing a rel link in the head of that page like this:

The original article on the Apple Developer site is here.

You don’t need to concern yourself with rounded corners or flashy highlights as the iPhone will add these ontop of your icon. Until I can bring myself to say goodbye to my jailbroken iTouch and pay Steve £12.99 for the official firmware I don’t have a picture of my icon as a webclip on an iPhone. If you do have an image then please send it into me and I will place it here.

Update: Drew McLellan has produced a bookmarklet that allows you to set the icon for any site. It works using script to place the link rel markup into the head of the document. Theoretically this will work although you might need to place it above any other previously defined custom icon rel link.

Posted in: journal