One neat feature I love on the iPhone is the ability to add a home screen icon that acts as a website shortcut. When you bookmark a webpage to the home screen it displays an icon that looks just like an app.
I tried adding a home screen icon to my own site on the iPhone, only to be presented with an ugly cropped screenshot of my web page and not a shiny icon.
This neat trick has worked flawlessly on other sites, why not mine.
What am I missing?
I’m strong in the belief that most websites don’t actually need an app, they just need to design a site that functions well on a mobile device. No continuous updates, no restriction to any particular mobile phone just a simple clean experience without the fuss right?
As long as I can make a neat little shortcut to a mobile optimised page on my phone’s home screen it almost feels like an app. Except when it lacks the shiny button, then it just feels cheap.
So how do I make a home screen icon?
After a little surfing around I found a simple recipe…
- Open your icon in Photoshop
- Save it as a PNG (512x512px)
- Name it apple-touch-icon.png
- Drop the png in your site’s root folder (I also stuck mine in my WordPress theme folder just in case)
That’s it!
You should now have a retina display optimised home screen icon that appears when your visitors save your site to their iPhone.
If you are viewing this site on an iPhone or iPad try it out.
Create a title for the home screen icon when you use the ‘Add to Home’ feature.
Here’s how the home screen icon appears on my phone. Pretty neat!
Its far more easieer than that if you are building your website on a wordpress platform…all you have to do is go into Settings>General>Upload a pic u want to use for your blog Save ..log out then go back to your site and follow the iphone instructioons of Adding a home screen. There you go an Icon done to perfect specification. Thank me later.