We 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.