Creating iPhone icons for your website

April 1, 2009

eggChops.com on the desktop of the iPhoneWe have all seen favicons grow in use so much in the last few years. Even animated favicons are being used more and more. But while using my iPhone today, I noticed that you can save a bookmark of a website from Safari to your home screen. That’s pretty cool, but then I noticed there was also the little icon that came up as a preview.

I then wondered if it were possible to create a little icon like the favicon to put in place of that, much like the ones the apps have on there already. A quick google found that I could indeed do this….and here’s how.

1. Create a 57 x 57 png of the icon you want to be displayed and name it apple-touch-icon.png
2. Upload that to the root of your site much like you would a favicon.

Now when you navigate to your site on your iPhone and choose to ‘Add to home screen’ after a couple of seconds, there will be the icon you uploaded. What’s more it will automatically add the nice little corners and wipe to the icon for you :) How simple is that?

An example of what my site looks like saved to the iPhone can be seen to the right.