Custom Button Icons for Apple’s iDevices

Home > Technology > Custom Button Icons for Apple’s iDevices

This is a guest post by Sarah Dolk of Adobe Nido Bed & Breakfast in Albuquerque, New Mexico.

I had some fun last night. I had read in a blog about how we can create a custom icon/button/logo for our business that Apple device users (iphone, ipad, and touch), can download to their desktop as an image bookmark, thus creating a simple link to our website for the device user. Wow. So I did it, and I’m going to tell you why and how.

idesktop

Now that Apple has been named the “Top Company in the US” (be it only for a few days this week), I would think that should spark more people to understand the importance of Apple’s portion of the mobile market.

Although a button can be created for any website on these idevices, the custom icon is more desirable, has a more “finished” appearance, and is much less likely to get accidentally deleted from the user’s desktop, especially if it’s attractive to the eye. The default icon created when there is no custom icon/button present on a website will be just a random square piece of the website’s window. Here is a custom logo from the BBC and a default logo from the innkeeping.org website:

Default icon example created from PAII web site Custom icon sample

How is this custom button good for an inn or b&b? Let me count the ways…

1 – Branding. Having people find your inn’s website and download the visual image associated with your inn’s website as a bookmark to their mobile desktop so they see it every time they are on that devise is priceless. It is a contestant reminder of your property.

2 – Saved for later. Even if you are not chosen right at that moment for a stay, you were saved for later and that may very well be when the booking happens. You have an advantage if the user, at a later date, sees your button again and the interest in your property is rekindled.

3 – Ease of use. The Apple user who downloads your icon button does not have to open a browser to go to your website, they need only to click you icon button on their desktop and boom – they’re there!

4 – It shows you’re hip. Attracting the Gen X and Y guests is really a must for any inn that wants to thrive and survive in this fast paced ever-changing decade. When this generation sees you are marketing to them, they will respond positively.

5 – Being mobile friendly. Even though the mobile market is small, the Apple share of the mobile market should not be ignored. After all, Apple users are not afraid to drop some bucks – they bought an Apple product, didn’t they? While this is something only available with Apple’s mobile browser (Safari) right now, there is no reason to believe it won’t also become available for Android devices in the future. Everyone likes a one-click path to somewhere!

That was enough reasons for me. I wanted it, so off I went to discover how to do it, and it was very simple if you have access to your web files.

First – you build an icon to match your website using whatever graphic program you use. Use your site’s color scheme, your logo or a part of it, something that represents you well as a visual. Keep it simple. You don’t have to have text in the icon, because the Safari software will pull it from your web page title and label your icon for you, (and the user can change to it what they want anyway).

The button doesn’t have to be fancy or have dimension and drop shadows. The Apple iOS will add dimension or a “glow” to your icon for you. But if you do want to get fancy there is code that can be added that will stop the iOS from messing with it.

The icon should be 57X57 pixels if you will just be adding one standard “fit all” icon, but if you want to get specific – and I did – start out with 114×114 (for iphone 4), and then reduce size and save a 72×72 version (for ipad) and 57×57 (for standard iphone and itouch). It must also be a .png file – very important!

Three icon sizes

Next – store the logo(s) in the root folder of your website (suggested), or provide the path in your code to where you put the image file, i.e., an image folder on the website, or Picasa, Flickr or whereever it is.

Place this code in the head section, (above the </head> code), on the page(s) you want to be book-markable with your custom icon. Here is the code that is specific for different apple devices:

<link rel=”apple-touch-icon” href=”yourimage.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”yourimage.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”yourimage.png” />

Remember to use the full path and filename of your image in place of yourimage in the above code.If you don’t want the Apple iOS to apply the special effects, use apple-touch-icon-precomposed instead of apple-touch-icon for the link rel value.

And – if you want to use one size logo only that’s perfectly OK. Of the three lines of code shown above, use the top line only, which is the default.

I like the idea of people out there having the icon for my inn on their mobile device. Can’t hurt, right?

×