This week, Apple rolled out an update to the iPhone and iPod Touch to enable users of those devices to add links to web sites to their home screen. Apple calls these WebClip Bookmarks. By default, the icon used for this home screen is a thumbnail screenshot of the page in question, but Apple have provided a mechanism for site owners to specify an icon to be used instead.

Much like favicons, the way these icons (let’s call them ‘touch icons’) are specified is quite simple. On adding a page to the home screen, Mobile Safari looks for a file in the root of the site called apple-touch-icon.png. If that file exists, it’s used. Simple as that.

Again, like favicons, reading in the documentation there’s a different way to specify more explicitly which file should be used for the icon. By adding a LINK element to the head of the document, a developer can specify the path to the icon that should be used.

The trouble is, most sites don’t specify an icon. Whilst the thumbnail screenshot is a pretty neat trick in place of an icon, they soon all look the same and become useless. Wouldn’t it be great if you could specify the icon you wanted to use when adding a site to your home screen?

So here’s how. All we need to do is add that LINK element ourselves – something that can easily be achieved with JavaScript. As the href attribute can take any URL, we just need to create an icon and then specify where it is on the web.

All this can be done through a simple bookmarklet. Adding a JavaScript bookmarklet to the iPhone can be tricky – I found it easiest to add it to Safari on my Mac and then use the option to sync Safari bookmarks with my iPhone. Here’s the bookmarklet:

Set touch icon

This will bring up a dialogue to prompt for the URL of the icon you wish to use – so make sure your icon is online somewhere. Clicking OK will seemingly do nothing, but what’s actually happened is that the LINK element has been set and the script has finished. Just go ahead and add the site, and your new icon should be used.

After a quick test it looks like you can’t override an existing icon, although it may just be that Mobile Safari is taking the first specified. By adding the new LINK above any existing ones we might be able to get around that.

Let me know if it works for you, and any suggested improvements are welcomed!

Update: In the comments, Rob McMichael points out that I could simply look for and remove any existing LINK in order to successfully overwrite the icon with my own. Of course! Good thinking, Rob. Here’s a new version to test, that does just that:

Set touch icon

Keep the feedback coming!