Posted by on Jul 2, 2010 in How To, My Business Adventures, Webdesign | 3 comments

I’m trying to avoid being Apple-centric…but with the release of the iPhone4 just last week, it’s hard to avoid at least some kind of conversation about it. I actually saw my first iPhone4 in hand yesterday….a associate of mine actually braved that long line to get one. I must say that Retina display is pretty pretty pretty nice.

OK, enough stroking Steve Job’s ego. Here’s a recent little thing a friend of mine asked me to do the other day — she asked me how to create a custom icon for her website on her iPhone. There was another local company charging people money for this service saying how they’re the “only people in town who did this….” Pfffffffffffffffft.

Turns out it’s incredibly easy…honestly this will take you less than 2 minutes to do it. Here’s what you do:

Open your favorite graphic program and make a new file that’s 45×45 pixels. Keep it 72dpi if you like….possible the new retina displays on the new phones can handle a higher resolution but I don’t have one to test (buy me one?)

Now create your artwork….doesn’t need any further flourish. You don’t need to round the corners, nor do you need to put any kind of reflective layers on it either. The iPhone will do that automatically.

Now save your file as a .PNG file and name it “apple-touch-icon.png“.  Upload it to the root directory of your website.

That’s really it. See?  2 minutes maybe?  5 minutes tops?

The next time you open up your website in the iPhone Safari browser, click on the little plus “+” icon and select “Add to Home Screen“. Viola! Your new icon should turn up. Needless to say anyone who bookmarks your site on their iPhone (should you be so lucky) will have your new icon appear on their phone.