How To Setup An Apple Touch Icon For Your Website And Individual Webpages

What are Apple Touch Icons?

Apple uses Apple Touch Icons to represent websites (similar to a favicon) on their iOS.

Apple Touch Icons are used with iPads, iPhones, Safari, and other general Mac systems for applications and websites.

Why is setting up Apple Touch Icons important?

Apple systems are very popular. iPads, iPhones, and Apple Safari (in general) are used by a large mass of internet users and captivating as many website visitors as you can is without question, common sense.

When Mac iOS users bookmark or save a website to their iOS system, by mobile device, etc, the webpage is saved to the home screen as a screenshot of the page, which can be very unflattering.

Setting up an Apple Touch Icon for your website will over-all “boost” the visual optimization of your website for iOS users, which can be very flattering.

How to set up Apple Touch Icons

The are different options to apply an Apple Touch Icon to your website be that for the entire website, single pages, etc. But first you will need to create an icon to use as your Apple Touch Icon (if you do not have one), host the icon image online, and finally insert the code into the “header script” of your website (if needed for separate pages).

This is the basic process to setup the Apple Touch Icon:

1. Design Apple Touch Icon
2. Host Apple Touch Image Online (Create Image URL/Or Host In Root Document Folder)
3. Add Header Script/Link Element To Your Website (For Single Pages/Replace Main Icon)

1. Design The Apple Touch Icon

The design and specifications of your Apple Touch Icon are important. How you design your Apple Touch Icon is up to you. You can do it yourself, purchase an icon from online image stores such as graphicriver.net, or hire a designer.

Below are common concerns and exact specifications about the Apple Touch Icon design.

• What size should the Apple Touch Icon be?

By default your Apple Touch Icon should be at most 144 x 144 pixels.

144 x 144 is the perfect size for iOS with retina displays. Icons will be compressed for other devices such as the iPhone.

Later on we will get into setting up size attributes to use the Apple Touch Icon properly for mobile devices. If the image attribute is not set, by default the icon will be 57 x 57 pixels, which is the bare minimum.

If you plan to use different size images 72 x 72 is used on iPads and 114 x 114 is used on iPhones.

• What image format should the Apple Touch Icon be?

Portable Network Graphics/Png.

• What should the title of the Apple Touch Icon image be?

There are 4 different options to setup the Apple Touch Icon image on your website using image titles.

What separates the default option 1 from option 2 is that option 1 will also add a “gloss” effect to the icon and option 2 will NOT add any effects to the Apple Touch Icon. By default Apple will round corners of the Apple Touch Icon. This rule applies for all options.

Option 1 (Round Corners With Gloss Effect)

[Normal_Box]apple-touch-icon.png[/Normal_Box]

Option 2 (Round Corners With NO Effects)

[Normal_Box]apple-touch-icon-precomposed.png[/Normal_Box]
Option 3 is not much of an option. If you wish to implement an icon for seperate pages (ie a custom Apple Touch Icon), the image may be titled anything, and may be hosted anywhere.

Option 4 (For iPads, iPhones, Retinas)

This option is used in conjunction with the 2nd option (multiple icons) under 3. Apple Touch Icon Header Script/Link Elements below.

2. Host The Apple Touch Icon Image Online/Image URL

For the Apple Touch Icon to work correctly, the icon image will need to be hosted online. The image needs to be  to be accessed by the image’s URL and you will need to save this URL if you wish to implement the icon for separate pages ,etc.

Hosting the Apple Touch Icon image in the root folder of your website will automatically implement the Apple Touch Icon for every page on your website.

3. Apple Touch Icon Header Script/ Link Elements

There are 2 options to setup the Apple Touch Icon for seperate web pages.

1. To specify an icon for a separate/single webpage or to replace the main website Apple Touch Icon with a webpage-specific icon, add a link element to the webpage. Link Elements are added to the head (header scripts) of a specific page.
[Normal_Box]

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

[/Normal_Box]

Replace /custom_icon.png with your image icon file name/URL.

If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”.

 2. To specify multiple icons for different device resolutions such as iPhone and iPad devices. Detail the most appropriate size for the device that is used.
[Normal_Box]

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

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-retina-ipad.png" />

[/Normal_Box]

If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”.