Snazzy Icons for iPhone/iPod Touch Web Clips

Apple’s iPhone and iPod Touch allow users to save “web clips” — favorite web pages — directly to the device’s home screen — so one tap of the finger on the icon takes you directly to that site. By default, the iPhone or iPod Touch use a nearly-impossible-to-read screen shot to represent the web clip; few web sites end up being visually identifiable on the home screen.
There’s a great opportunity for branding here. Apple has made it very easy to create custom icons for your web site. There are 2 steps:

  1. Make a graphic that is 57 x 57 pixels and save it in PNG format.
  2. Name this file apple-touch-icon.png and save it to the main (“root”) level of your web server.

(Credit to The Primary Vivid Weblog for documenting the process in plain English.)
When you add a web clip to your iPhone or iPod Touch’s home screen, it automatically (and unavoidably) adds a glow effect and rounded corners to the graphic you provide. To compensate for this, use this web clip Photoshop template (from iPhoneMinds) that shows just where the usable space in that 57 x 57 pixel square is and how it will look with the glow effect.
How easy is it? It took me (a truly novice Photoshop user) about 5 minutes to make an icon for RSS4Lib — if you’re using an iPhone or iPod Touch, save this page to your home screen to see it, or just view
If your library has iPhone or iPod Touch users, why not extend your brand to their mobile desktop?

One thought on “Snazzy Icons for iPhone/iPod Touch Web Clips”

Comments are closed.