How to Create an Apple Touch Icon for Your Website

written by
Friday, May 18, 2012

How to Create an Apple Touch Icon for Your WebsiteEXCERPT: When browsing online with an Apple mobile device, users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. Essentially, users are able to create a bookmark that is given priority placement.

How to Create an Apple Touch Icon for Your Website

When browsing online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. Essentially, users are able to create a bookmark of sorts that is given priority placement amongst their apps.

Unfortunately, by default, Apple will use a screenshot of the page when creating a home screen icon which will often look hideous and illegible. Thankfully though, website owners have the ability to change this by designating a specific icon graphic, called an Apple Touch Icon, to be used instead.

What is an Apple Touch Icon?

In short, an Apple touch icon is basically a favicon for Apple mobile devices, and, if set, is displayed when a user saves a web page to their home screen. For example, the Apple touch icon for this website looks like this: How to Create an Apple Touch Icon for Your Website

How Do I Create an Apple Touch Icon?

To create an Apple touch icon, you will likely need the assistance of a graphic designer or have access to and knowledge of graphic editing software, such as Photoshop. Begin by creating a square graphic that is sized to 129 by 129 pixels, and then saving it in .png format. 129-pixels is the perfect size for the Apple iPad, and will allow other devices to properly resize as needed.

Also, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. While these are key characteristics of Apple icons, the device will do this automatically.

How Do I Implement My Apple Touch Icon?

You will be pleased to know that Apple has made implementing touch icons very easy to do. You have the following two options:

Option 1: Standard Icon

Standard Apple touch icons are rendered with a gloss effect and rounded corners. To implement a standard icon, apply the following code into the head section of your website:

<LINK REL="apple-touch-icon" HREF="/apple-touch-icon.png" />

Option 2: Precomposed Icon

Precomposed Apple touch icons are rendered with rounded corners, but without a gloss effect. To implement a precomposed icon, apply the following code into the head section of your website:

<LINK REL="apple-touch-icon-precomposed" HREF="/apple-touch-icon.png" />

With either option, your icon will need to be hosted online. This means that you will need to edit the code provided above and specify the correct path location of your icon (within the 'HREF' section). Also, you can only implement one of these options, not both.

The following is a side-by-side comparison of what each looks like:

How to Create an Apple Touch Icon for Your Website

Why Website Owners Should Use an Apple Touch Icon?

Hopefully I’ve been able to give you enough information to create and implement your own Apple touch icon. However, some of you are undoubtedly questioning why it is that you should want to create and implement one. Why not just use the default screenshot that Apple captures, right? I will tell you why not: design and branding.

Creating a Complete, Customized Design

Like most website owners, design is important to you. I imagine that you wish to control every aspect of how your website looks and functions. Let me start by saying that there is nothing at all wrong with this for I feel the same way. Creating an Apple touch icon will not only make users happy (because they won’t be subjected to seeing a lame, generic icon on their home screen), but also help you to provide a more complete, customized website experience through design.

Brand Development

I am a HUGE advocate for branding. Proper use of company and personal branding can have a long lasting effect on one’s ability to grow their business, whatever it may be. I strongly encourage all website owners, if given the opportunity, to tie-in their brand’s logo, color scheme, and messaging whenever possible. Creating an Apple touch icon is one of those opportunities.

Give it a shot. If not for design or branding purposes, create one to help brighten up other people’s iPod, iPhone, and iPad home screens.

Labels: