During the past several years, mobile web use has exploded. Currently, mobile devices account for about 12% of web traffic in the US, and this number is widely expected to continue to grow rapidly. Apple devices, which account for about 50% of mobile traffic, offer a handy feature called “Add to Home Screen,” where users can establish a convenient shortcut to websites they visit often; an icon linking to the website is placed alongside the user’s applications.
Users access their phone’s home screens many times per day, keeping the sites they’ve added fresh in their minds. This creates a great opportunity for a web site owner to put his/her best foot forward by providing a high quality icon for users’ home screens. This is accomplished by creating an Apple Touch Icon and using a line of code to link to it, like this:
Although multiple options are available for more advanced users, the easiest way to do this is to create a PNG file with dimensions of 144×144. All iOS devices currently available use this size or smaller icons. If you don’t want to write HTML code to point to the icon, plugins are available for most content management systems that will insert the code for you.
If you choose not to specify an icon, the mobile device will default to a screenshot of your website (see left). Here, Food.com is missing out on an opportunity to prominently display their branding on the home screen of users’ phones and tablets.
Conversely, Food Sense set up this attractive Apple Touch Icon, displaying the site’s logo. Instead of a non-descript screenshot of the website, users see Food Sense’s logo, up close and personal.
If you use an iPhone, iPad, or iPod Touch, you will notice that most of the application icons have rounded corners and a glossy look to them. Apple wants its interfaces to have a uniform appearance. For this reason, unless otherwise specified by the site owner, the icon will automatically be given rounded corners and a nice shiny overlay. The image on the left is the PNG file created by Food Sense. The Apple device’s automatic modifications result in the image shown above, causing Food Sense’s icon to look right at home with the user’s applications.
Creating an Apple Touch Icon is an easy way to encourage users to make repeat visits to your website on their mobile devices. Is your site ready to succeed on the increasingly mobile web? We’d love to work with you in creating a great user experience on every device, from smartphones to tablets to desktops. Just get in touch!
