How to Set Custom Apple Touch Icon for Magento Mobile Theme

Do you have 100% mobile ready theme for your Magento store? Are you sure your Magento ecommerce website theme is 100% satisfactory for Apple and Android users? It may be myth, please visit your mobile ecommerce website created in Magento and add this website to the favorite links of smart phones screen. You will mostly see improperly resized, unattractive and some time horrible favicon.

If you are precisely designing beautiful Magento eCommerce website theme then why any compromise on little but effective thing like touch icon. You should have beautiful looking custom touch icon like Apple or Android. Here we try to give brief on how you can easily add pleasant looking custom touch icon for magento mobile theme and make your Magento mobile website more elegant.

What is Touch Icon and Why My Magnto Mobile Site Require Custom Touch Icon?

Touch icon is a basically an image icon in PNG format, similar to favicon associated with your Magento eCommerce website. Visitors usually add their favorite links on screen of mobile, now while your customer add favorite link to screen they expect recognizable and beautiful touch icon. Below is an image of an apple screen that more easily describe custom Magento ecommerce website icon.

How to Set Custom Touch Icon for My Magento Mobile Website?

Adding custom touch icon to mobile version of your Magento eCommerce website is quite simple and not at all mammoth task but it helps in easy reorganization and brand creation of your magento mobile website. All we need to do is to add special “apple-touch-icon” tag, we put a line of code in the head section of Magento mobile theme or website (file: /iphone/template/page/html/head.phtml) and best part of this is it is supported by both Apple devices and Android devices.

Here is an Example:

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

iOS is a smart operating system so it adds special effects like rounded corner, shadow to the custom touch icon. If you do not want special effects on then use below tag instead tag mentioned above:

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

Parameter “sizes” facilitate you to define better resolution icons for iPad and Retina display, below is a example:

<link rel=”apple-touch-icon” href=”<?php echo $this->getSkinUrl(‘touch_icon_iphone.png’) ?>” />

<link rel=”apple-touch-icon” sizes=”72×72″ href=”<?php echo $this->getSkinUrl(‘touch_icon_ipad.png’) ?>” />

<link rel=”apple-touch-icon” sizes=”114×114″ href=”<?php echo $this->getSkinUrl(‘touch_icon_iphone_retina.png’) ?>” />

<link rel=”apple-touch-icon” sizes=”144×144″ href=”<?php echo $this->getSkinUrl(‘touch_icon_ipad_retina.png’) ?>” />

How to Check Custom Touch Icon on iPhone, iPad or Android Mobile Devices?

On Apple Devices like iPhone, iPad etc

Visit Magento ecoomerce website using iOS devices like iPhone, iPad etc. and while you are visiting web page, add web page to home screen, you can see elegant custom touch icon on you mobile screen.

On Android Devices:

• Bookmark the web page in your browser
• Open “bookmarks” screen
• Long-press the website bookmark
• Select “Add to Home screen”

Hire Magento Developers is a company providing Magento customization services since a long time and we have satisfied list of clients across the globe. We always prefer to add custom touch icon for Magento mobile website as it adds convenience for user and brand creation for Magento store owner.