Create Snazzy WebClip Icons

The iPhone 1.1.3 firmware update added some great stuff, including Safari WebClips. I’ve literally added a dozen or more to my home screen in the last 12 hours or so. But the icons for the clips leave something to be desired. Even though I’ve done my best to zoom in as tightly as I can on any logo on any site (like Flickr for example), it can still be difficult to decipher one icon from the other. And some sites just look bad at 57×57. Of course you could read the names of each icon, but what’s the fun in that? I want nice, clean, simple icons on my home screen to help keep it, well, pretty.

Thankfully, Apple has given web developers a way to create custom home screen icons. Basically all you have to do is create a custom 57×57 PNG, name it “apple-touch-icon.png”, drop it into the root of your web content on your server, and link to it in the head of your content. The iPhone (or iPod Touch) will automatically add the “glassy” overlay to your icon, and pop will pop up when someone adds your site to their home screen.