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