Yesterday, I showed you how to add bookmark icons on your iPhone's home screen. Today, I am going to show you how I added support for custom icons on Search Engine Roundtable and RustyBrick.

As per the iPhone Developer Center, it is very simple.

Step 1: Create custom icons that are 57x57 and save them as PNG files. They can be larger, but Apple will scale them for you.

Step 2: Rename the file to apple-touch-icon.png

Step 3: Upload them to your root directory on your server.

STOP - what if you don't have access to your root directory? Well, you can add a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

Then you go to your site and follow my directions on how to add bookmark icons on your iPhone.

Here are the three I added:
Cartoon Barry Apple iPhone Icon Search Engine Roundtable Apple iPhone Icon RustyBrick Apple iPhone Icon

Here is what it looks like on my iPhone:

iPhone WebClip Bookmark Icons

Pretty slick, don't you think?

OK, I am obsessed this week with the iPhone - sorry.