One of the many benefits of using an iOS device — iPad, iPhone, or iPod Touch — is the sheer ease that one can place the website on the home screen for future access. By default, the iOS system will create a new icon from a screen shot of the web page itself. With a simple addition of some HTML code in your website’s header, you can create an Apple Touch image that will reflect the feel of your website — and look great among the rest of your home screen icons.
For example, the code below is what we used for our site right here at Imagine Media Solutions:
<link rel="apple-touch-icon" href="http://imaginemediasolutions.com/wp-content/uploads/2011/07/IMAGINE-NEW.jpg" />
The code itself is simple. The “apple-touch-icon” code lets the browser know that this image is specifically designed for a home screen icon (in this case, the nifty Imagine logo), and the link itself is the exact location of the image on your server.
For the iOS user, it’s even easier to place the icon on their home screen (after all, it IS an Apple iOS device). When they’re on a website they like (namely yours), they’ll just tap the “action” button (see the figure below), tap “Add to Home Screen,” and type out the desired name for your icon. It’s that easy!
Of course, we’ll gladly help you create a Apple Touch icon for your website — just one of the many services we offer here at Imagine Media Solutions!
Be sure to check back often for more website design tips!