Create Snazzy WebClip Icons

mobile_safari2.jpgThe 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.

You can check it out more in depth on the iPhone Dev Center (look at “Create a WebClip Bookmark Icon”) or Dan Dickinson’s site. A little thanks goes to Daring Fireball for the initial point to Dan’s site.

Check ’em out and help keep our home screens looking sexy!

Update: Some folks are reporting that icons sized to 57×57 are looking “blurry” on the home screen. It seems that 60×60 is working the best for everyone, though your results may vary.

loading

Comments have been disabled for this post