Making the Magento Theme Fully Responsive: Adding mobile icons

Did you know that you can add custom home screen icons for iPhone, iPad, and other tablets or smartphones for your website?

If you have an iPhone, for example, you know that it has the possibility to save a site bookmark into the phone, which will be displayed as an app.

Now, we will learn how to create a custom icon and how to integrate it into the theme.

First, we need to know that there are several icon sizes that can be created, and the following are the most-used icon sizes:

• iPhone/iPod icon size: 60 x 60 px
• iPhone/iPod retina icon size: 120 x 10 px
• iPad icon size: 76 x 76 px
• iPad retina icon size: 152 x 152 px

You can see all the dimensions on the Apple Developer site at https://developer.apple.com/library/ios/documentation/userexperience/conceptual/ mobilehig/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1.

To create your custom icon, perform the following steps:

1. Download a free icon from http://ios.robs.im/. The mockup that comes in the PSD Photoshop version has been created by Rom So, open the site that you can see in the following screenshot:

2. Once you have downloaded a free icon, open it and look for the advanced object in the level. If you don’t see the level window, navigate to Window | Levels.

3. Then, double click on the advanced object level called Edit and Save, as shown in the following screenshot:

4. In the new page that opens, if you navigate through the levels, you can see some neat gradients that you can Now, insert your custom icon here, as you can see in the following screenshot:

5. Save and close the
6. Now, return to the full mockup, where you can see the icon in all the different sizes, as shown in the following screenshot:

7. Now, it’s time to export the Go to File | Save for Web and then hit Save. The document is set to export every icon automatically inside a folder called App Icon.
8. Once all the icons are saved, copy them into your theme skin folder in skin/frontend/bookstore/default/images/app-icon/.

9. Next, just add the following code in the phtml file, so the devices can find your icons’ images. This file is located in app/design/frontend/ bookstore/default/template/page/html:

<link href=”<?php echo $this->getSkinUrl() ?>/images/app- icon/iPhone.png” rel=”apple-touch-icon” />

<link href=”<?php echo $this->getSkinUrl() ?>/images/app- icon/iPhone@2x.png” rel=”apple-touch-icon” sizes=”76×76″ />

<link href=”<?php echo $this->getSkinUrl() ?>/images/app- icon/apple-touch-icon-120×120.png” rel=”apple-touch-icon” sizes=”120×120″ />

<link href=”<?php echo $this->getSkinUrl() ?>/images/app- icon/iPad@2x.png” rel=”apple-touch-icon” sizes= “152×152” />

10. Now, let’s conduct a Open the site with your iPhone browser, Safari.
11. Then click on the icon highlighted in the following screenshot:

12. The panel shown in the following screenshot appears; click on the Add to Home button:

13. Now, if everything is working and the iPhone loads the icon correctly, you should see it in the next screen, as shown in the following Here, you can also add a custom text.

14. Click on Add on the top-right corner, and your site has now been added to your iPhone home screen with your custom icon, as shown in the following screenshot:

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.