Creating an Apple / Droid Icon

Many web users are now surfing the web on their tablets or phones. When a visitor bookmarks your page using their iPad, Droid, iPhone, or other device, that bookmark shows an icon. Here is how to customize that icon.

First, go into your favorite drawing package and create a new image that is 72 x 72 in size. Set its resolution to be 132 pixels / inch. This will optimize the image for most uses.

Your aim here is for the image in this square to be crystal clear. It should convey the meaning of your website in a glance. Don't go for complicated images that are hard to make out. Intricate landscapes will be lost at this small size. You want the icon to be sharp, clear, and meaningful. You want your visitors to recognize it at a glance and click.

If you're writing a word or two, use the clearest font you can find. Avoid curly letters or complicated fonts. If you're using an image, make sure the image makes perfect sense at the small size. Your visitors aren't going to sit pondering the image trying to figure out what it might be.

When you're happy with your image, save that as your base image.

Now, depending on what drawing package you are using, give an attempt at using a "bevel" function. In PhotoShop this is one-button-click easy to do; in other packages it might be something you have to look up in a manual. Most icons on iPads and other systems have a slight bubble look to them, and the bevel will give your icon that same look. It's not absolutely necessary, but it's a nice touch.

You can certainly curve the edges of your square if you want, to control how that looks, but most devices will automatically give your icon that curving edge automatically. So it's not necessary for you to do that.

Save this icon as a PNG file with the name of apple-icon.png. Load it up onto your website.

Next, it's time to tell each webpage to use this icon image. I have a incHead.asp include file that I include into every page on my site. That way when I want to add or delete content to my header area I just change that one include file and it affects every single page on my site. If you are not using ASP or PHP or another language which allows includes, you'll have to make the following change to every page on your site.

Go into the HEAD section of your page. Into that HEAD section add the following line -

<link rel="apple-touch-icon" href="" />

Of course change the "" part to point to your actual website. Make sure that this location is where your image file lives.

You should now be set! Try bookmarking your website on any Droid or iPhone system. Add the bookmark to your desktop area. You should now see your icon associated with it!

My icon for this site here is this one -

If you were to bookmark any page on this site with your Apple or Droid device, this is the icon you would see to go with my bookmark. Feel free to give it a try!

Main Page on Marketing and Promotion
Work from Home