iPhone icons for Magento Stores

Magento Tricks To add an iPhone icon to your Magento installation, first you need to create the icon. Here’s a tutorial if you need help with the design. Make a graphic that’s 57×57 pixels with a transparent background.

Here, we assume your image is called iphone_icon.png and you’ll be placing it in your site’s root directory. Upload the icon to your server as a .gif or .png and take note of the location.

To add the code for the icon to your Magento store, open /app/design/frontend/default/[yourtemplatename]/template/page/head.phtml and find the following code:

<rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?/>

This is the link to your favicon.

Paste this code to call your iPhone icon below:

<link rel="apple-touch-icon" href="http://www.[yourwebsiteaddress]/iphone_icon.png">

Re-upload head.phtml.

Navigate to the site using an iPhone and use the Add to Home Screen option to bookmark the site to your phone – if you’ve placed the code correctly and it’s able to find your iPhone icon, the new icon will appear on your phone. Congratulations!