HowTo: iPhone / iPod Touch WebClip iCons


So Mr. Jobs announced yesterday that the iPhone and upgraded iPod Touch will be able to use something called WebClips. Essentially these are bookmarks that you can add to the Home screen of your device. Pretty cool huh!? Well, they look best if there is some kind of icon as opposed to the default tiny little screen shot. I only know this because I took the plunge and forked over my $20 to Apple to upgrade my new, as of Christmas, iPod Touch. I dropped a WebClip of Google’s homepage to my Home screen and it was a shinny Google icon. Other site have simply shown up as a shinny screen shot, not nearly as cool…

So if you have a website or blog or whatever, and you want your iPone/iPod Touch readers to like you a little more, go ahead and setup a custom icon for your site…just for them!

It’s really easy! I have already done the work, but have no WiFi @ work, so I can’t test it until I get home…

  • Create a 57×57 PNG.
  • Name it “apple-touch-icon.png”
  • Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

That’s it. Note that your icon will receive the glossy treatment as well as those rounded corners, so keep that in mind.

Done yet? Hopefully mine will work! Will be kinda cool to see MY website icon on an iPod Touch or iPhone!


via: TUAW via: vjarmy