Simple Tips For Increasing Web Traffic From Mobile Devices Part 1

It never ceases to amaze me how many performing arts organizations don’t have dedicated icons for mobile devices such as iPhones/iPads, Android Smartphones and tablets, plus Windows 8 devices. Without those icons, site visitors attempting to bookmark your site on their device home screen get a snapshot of the homepage which, as you can probably guess, looks awful in icon format.

But having a dedicated icon that looks attractive and projects your organization’s brand is one that encourages more frequent use, take a look at the difference:

Fortunately, getting mobile icons in place is a very simple process and you have two options: super easy and regular easy. In both versions, you’ll need to have a mobile icon ready and to that end, here’s a free and handy Photoshop template that will allow you to create a simple, classic icon using your organization’s logo.

All you have to do is replace the “Adaptistration icon” Smart Object layer with your own logo, adjust the gradient colors as desired, and save with the following filename: apple-touch-icon.png (that last step is important!).

[ilink url=”https://adaptistration.com/wp-content/uploads/Mobile-Device-Icon-Template.zip” style=”download”]Download free mobile icon template[/ilink]

If you’re looking for a template capable of producing an icon with more wow-impact (like the one I created for Adaptistration), consider picking up an app icon template at Graphic River.

Super Easy Method

1. Upload your mobile icon (apple-touch-icon.png) to your website’s root directory. If your site is installed in a subdirectory, make sure the icon file is uploaded there.

That’s it.

No coding required, just upload the file. The only drawback here is it might take a device a few moments longer to locate and display the icon during the bookmarking process and in that interim, the home page snapshot will appear.

Regular Easy Method

1. Upload your mobile icon (apple-touch-icon.png) to your website’s root directory. If your site is installed in a subdirectory, make sure the icon file is uploaded there.
2. Insert the following code into the header of your website: <link href=”apple-touch-icon.png” rel=”apple-touch-icon” />

You’re all done.

Although this option requires some coding, it provides the ability to specify the pathname for the apple-touch-icon.png file and it does a better job at helping devices locate and display the icon without delay when the user goes through the bookmark process.

When It’s All Said And Done

After the user adds the icon to his/her device’s home screen, a simple tap will automatically open the device’s default web browser to your website’s URL. The following image makes it clear just how easily a bookmark to your site that is nothing more than a homepage snapshot would be swallowed up if surrounded by a sea of purpose built icons.

In Part 2 article, we’ll examine how you can encourage mobile device users to add your mobile icon by providing step by step instructions for major devices. We’ll also have a special custom app icon design give-away!