Apple touch icon for your Magento mobile theme

Beautiful icon for your Apple and Android visitors.

Are you sure that your Magento theme is 100% ready for Apple and Android mobile visitors? If so, try to visit your mobile website and add it to the smartphone desktop favorites links. Most likely you will see ugly re-sized favicon instead of beautiful desktop-like Apple or Android icon.

In this article I will show how to add nice looking touch icon to your Magento mobile theme and make your Magento mobile store better.

What is touch icon and why I need it?

The touch icon is an image icon in PNG format that will be associated with your Magento store. When visitor add your website to favorites links on desktop of the smartphone, your customer expects to see a nice looking icon. Here is an example of Apple desktop with custom website icon:

Example: Touch icon on iPhone

How to add custom touch icon to my Magento mobile theme?

All you need is to add special "apple-touch-icon tag" (which is supported by Android devices as well) to the head section of your mobile theme or website (file: /iphone/template/page/html/head.phtml). Example:

<link rel="apple-touch-icon" href="<?php echo $this->getSkinUrl('touch_icon.png') ?>"/>

By default iOS will add special effects to the icon image: rounded corners and shadow. If you don't need it, you can use this tag instead of previous one:

<link rel="apple-touch-icon-precomposed" href="<?php echo $this->getSkinUrl('touch_icon.png') ?>">

You can define better resolution icons for iPad and Retina displays using "sizes" parameter, example:

<link rel="apple-touch-icon" href="<?php echo $this->getSkinUrl('touch_icon_iphone.png') ?>" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $this->getSkinUrl('touch_icon_ipad.png') ?>" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $this->getSkinUrl('touch_icon_iphone_retina.png') ?>" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo $this->getSkinUrl('touch_icon_ipad_retina.png') ?>" />

How to test my touch icon on iPhone, iPad or Android device?

Apple mobile device:
Visit your website using Apple iPhone or iPad. When you're looking at a web page, hit "+" (or iPhone) and select "Add to Home Screen".

Android mobile device:

  1. Bookmark the page in your browser using Android
  2. Open "bookmarks" screen
  3. Long-press the website bookmark
  4. Select "Add to Home screen"

Further reading