Pixelbox

Tuesday saw the release of the iPhone software version 1.1.3, and amongst the new features it were web clips on your home screen. This allows you to save bookmarks to websites on your home screen, for quick access.

By default the icon used for a web clip will be a screen shot of the page. This is great, but it doesn't look nice and makes it hard to tell at a glance, one web clip from another. Dan Dickinson blogged about how you can add custom touch icons to your website by adding a link tag into the head of your HTML.

This is great and many sites have already added custom icons, (pownce, google, twitter) but there are some that don't (as of yet) such as Google reader.

So up popped Drew with a bookmarklet to add custom touch icons to your iPhone's home screen. It works by adding the link tag into the head of the document after you specify a path to the image, clever stuff! So all you have to do it host your custom icons, or use other peoples and away you go.

I am not sure how it works on replacing images if they are already there (the twitter one sucks). Lots of people are starting to create their own too. Nathan recommends creating icons at 158×158px to get a crisp look, Mr. Hicks has a nice little RSS icon for Google Reader and Ben Darlow has a host of icons including a nice twitter (twitterific) one.

Step by Step

1. First drag this link to your safari bookmark bar. Set touch icon or Override Touch Icon
2. Sync your iPhone (with bookmark sync turned on)
3. Browse to a website you want to make a web clip of through safari on your iPhone
4. Open your bookmarks and find the one you just added to bookmark bar
5. Enter the URL of an icon/image you would like to use
6. Hit OK, then click the + at the bottom of the screen
7. Select, "Add to Home Screen" and wait for the icon to appear
8. Enter a name and hit, "Add"

UPDATE:

I have hacked and updated Drew's bookmarklet to override sites with existing Touch Icons: Override Touch Icon

It's a bit dirty as it removes all link elements in the head, however this shouldn't be a problems as you shouldn't need them after the page has loaded and this is a one off for setting the home screen icon :) Also be sure to wait for the icon to load, can take a while...

UPDATE 2:

Drew has taken my hack and made it a little more efficient and less reckless by just removing link tags with the "touch icon"'s rel attribute, and then breaking when it finds it. It's fun learning about bookmarklets, although I am sure there is a better way of writing them than how I was doing it :p

UPDATE 3:

Cameron Hunt has updated the bookmarklet even more to give users some of the most commonly icons by default (and make it look slightly nicer). Cameron Hunts's Friendly iPhone Web Clip Override

UPDATE 4:

Check out iclypso for a great source of icons and instructions on how to do it!