Oct
15
2015

Adding Apple (iPhone/iPad) touch icons to Magento 1.9 using local.xml layout XML

We’ve seen a lot of hacky-feeling ways to adding Apple touch icon paths to theof your Magento store, so here is a cleaner way to add Apple Touch icons to your Magento theme’selement.

1. Open your Magento theme’s local.xml

Open your theme’s local.xml layout file, located in the app/design/frontend/[package]/[theme]/layout, where [package] and [theme] are relevant to your store.

For example, the local.xml file might be in this directory of your Magento store if you have enabled a custom package called rcc:

app/design/frontend/rcc/default]/layout/local.xml

2. Add the layout XML to add touch icons

Once you have found the local.xml file in your Magento theme (or created it in your theme, if it doesn’t already exist), find the <reference=”head”> block in the file, and add the following layout XML:

<block type="core/text" name="head.touch.icons">
<action method="setText">
<text><![CDATA[<link rel="apple-touch-icon" href="/apple-touch-icon.png" /><link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />]]></text>
</action>
</block>

This adds <link> elements in to the <head> element of your Magento theme which reference the required Touch icons such as apple-touch-icon.png and apple-touch-icon-180×180.png used by different Apple device types (such as iPad, iPhone).

3. Upload your Apple Touch icons to Magento

You can then upload your desired Apple Touch icons to your Magento root directory, so that they appear at:

example.com/apple-touch-icon.png

etc. This means that they can be found by devices which don’t make use of the <link> elements in your theme’s <head> element.

You can use a free tool such as Iconifier to create the various sizes required for this, including your store’s default favicon.ico.

4. Make the local.xml file live

Once you’ve made the changes to your Magento theme, upload your new local.xml to your site.

Don’t forget to clear your Magento store’s caches in the System > Cache Management screen of your Magento administration panel once you’ve done this to see the changes!

That’s it, you should now see Apple Touch icons on your Magento store!