How to create a custom Apple iPhone icon for your Web site

I've had a variety of different cellphones in the last few years as the technology underlying the cellular network has evolved from being about phone calls to offering up a wide variety of services, many of which have a small but growing price tag associated. A year ago I had just bought a Blackberry Pearl and was finding it a wonderful evolutionary step from the Motorola RAZR which, upon reflection, was all about the form factor and definitely not about the phone capabilities (especially with the crippled Verizon RAZR operating system).

The Apple iPhone represents a significant step in the evolution of these phone systems, however, because, like the iPod itself, Apple continually tweaks and tunes the operating system with updates. I can recall at least five updates since the phone was released, updates that generally improved stability and functionality, but also added new features and even entirely new applications (in this case I'm thinking of access to the iTunes Store, which just *poof* appeared one day).

The latest update to the phone, 1.1.3, added a very important new feature to the phone system, one that finally gives you the ability to truly customize and tweak the phone's base screen for your personal tastes and requirements: Home Screen Bookmarks.

Let me show you how it works, then I'll explain how to make a custom icon for those bookmarks too.

Here's AskDaveTaylor as shown in the iPhone Safari browser:

Cute, eh? Everything in miniature, even my shrunken voodoo head.

To bookmark this - or any other page - you simply tap on the "+" symbol along the bottom of the screen, which brings up:

"Add Bookmark" adds it to your bookmark menu, but the interesting feature here is Add to Home Screen. Tap it and you'll now have a chance to fine-tune the name of the bookmark:

In this instance, shorter is definitely better. Even here, by adding the " 2" to the default "Tech Support" it kinda messes up the display on the iPhone screen, showing "Tech...port 2" to fit. Instead, I'll actually skip the "2" so you can see the default home screen bookmark:

It's kind of hard to see, but the icon itself is a tiny representation of the home page of the site, with the "Ask Dave" button supplying the red dot on the right side. Above and to the right you can see custom home page bookmark icons for Meebo.com and Twitter.com.

How'd they do it and how can I have my own custom icon too?

It's surprisingly easy. You need to create a PNG format graphic file that's 45x45 pixels in size, name it apple-touch-icon.png and drop it in the root directory of your Web site. Here's what I had my graphics guy create:

You'll notice that it's just a regular rectangular graphic image with no rounded corners or other fancy stuff. I've added the gray edge so you can see how big it is too, that's not part of the graphic. Later you'll see that the iPhone itself automatically rounds off the corners and adds a slight glassy reflection on the top half of the icon to make it more three-dimensional.

Anyway, adding that graphic is enough that when I again try to bookmark the AskDaveTaylor site with a home page bookmark on the iPhone, it's a much improved icon:

Cool, eh? I'm now busy creating similar little icons for all of my sites so that iPhone users can enjoy shortcuts to all of my sites.

If you can't add the icon graphic to the root directory of your Web site, or just want to keep things organized in subfolders, you can add a link command to specify a different filename or different location for the apple-touch-icon.png file:

That's all there is to it. Go forth, create your icon, and enjoy!