Masthead (39k image)
Home » Archives » March 2008 » Today's New Trick...iPhone Icons [Previous entry: "1st entry from my new iphone"] [Next entry: "She's F@#ing Obama"] 03/21/2008: "Today's New Trick...iPhone Icons" listening to: Bones on Hulu

I was reading a website on web development yesterday and in the little bio blurb at the end it said that the author tries to learn a new trick every day. I thought that sounded novel..so I decided to learn a new trick today.

Todays Trick? How to make a proper iPhone Icon for your website. You see, if you do not make an icon for your site and someonen adds it to their iPhone, they see a little mini-screenshot of the home page. Not really attractive, or distinctive, nor emotionally rewarding.

So, not wanting users of ScreeNerd to be emotionally unrewarded, I made one for ScreeNerd.com. Here's how you do it:

Make a 45px x 45px PNG of your icon.
Do not add any 3D elements, shadows, or rounded corners. Turns out the iPhone does that for you.
Save the graphic to your website's root directory as apple-touch-icon.png

Boom. You're done. The next person to add it to their iPhone's home screen will see the proper icon. If you have an iPhone, go add it: ScreeNerd.com