Mobility

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

One of the features added to the latest revision of the Apple iPhone operating system that’s garnered quite a bit of attention is the ability to save Web page bookmark icons directly on the main screen of the phone. Experimentation reveals that some sites have cool icons while most are just miniature representations of the Web site. What’s the difference? Read on and find out, including step-by-step directions on how you can easily ensure your own site (or blog!) has a custom iPhone icon too.

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:
Apple iPhone: Safari: Viewing Ask Dave Taylor Tech Support

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:
Apple iPhone: Safari: Creating a Bookmark for Ask Dave Taylor Tech Support

“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:
Apple iPhone: Safari: Naming Bookmark for Ask Dave Taylor Tech Support

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:
Apple iPhone: Safari: Home Page bookmark - default - for Ask Dave Taylor Tech Support

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 45×45 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:
Apple iPhone / iPod Touch custom icon

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:
Apple iPhone: Safari: Custom home page bookmark 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!
Thanks to Dan Dickinson, Anil Dash and, of course, Apple for detailing exactly how to accomplish this nifty trick.