Blog Post

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.

3 Responses to “Create Snazzy WebClip Icons”

  1. For custom icons just use the depricated but safari compatible html redirect with some free host like google pages:

    meta http-equiv=”refresh” content=”0; URL=put-the-destination-url-here”

    First create a blank html page with the apple-touch-icon.png in the same directory. Then on your phone navigate to the blank page and add it to your homescreen. Now you have your pretty icon. Finally just update the blank page with the html redirect. Voila.

  2. Eleventeen

    You’d have to make your own image, host it, and then inject the link into the page. I bet there’s a way to do it with JavaScript.

    Unfortunately, I’m not good with graphics *OR* JavaScript, so I’m pretty much useless after this point.