EXCERPT: 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.
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 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:
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.
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.