With the increasing popularity of smartphones, it's not enough to just provide a favorites icon any more; these don't work as effectively on mobile devices, but you can provide alternate icons for use on Apple, Android, and Windows devices.
You can specify the Apple icon that will be used when customers save your store to their device's home screen with the addition of elements to your store's <head> element.
Copy the head.phtml file under /app/design/frontend/base/default/template/page/html/ to /app/design/frontend/default/m18/template/page/html/. Open your theme's head.phtml file and insert the following code at the bottom of the file to cater for the variety of sizes Apple devices can use:
<link rel="apple-touch-icon" href="<?php echo $this->getSkinUrl('images/icon-iphone.png') ?>" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $this->getSkinUrl('images/icon-ipad.png') ?>" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $this->getSkinUrl('images/icon-iphone_retina.png') ?>" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo $this->getSkinUrl('images/icon-ipad-retina.png') ?>" />Once you have done this, you'll need to save the icon images in your theme's /images/ directory. You will require the following sizes:
- 57 x 57 pixels for iPhones
- 72 x 72 pixels for iPads
- 114 x 144 pixels for iPhones with retina displays
- 144 x 144 pixels for iPads with retina displays
If you now refresh your store and use the Add To Home Screen option in your browser, and you will see that the appropriate icon is used:
Microsoft also allows you to specify an icon used in Internet Explorer in Windows 8 and above. Edit your theme's head.phtml file again, which is located in the /app/design/frontend/default/m18/template/page/html/ directory. At the bottom of the file, add the following lines:
<meta name="msapplication-TileColor" content="#7F6A00"/>
<meta name="msapplication-TileImage" content="<?php echo $this->getSkinUrl('images/icon-windows.png') ?>"/>Save your icon image as 64 x 64 pixels in your theme's image directory. You can specify the TileColor value too to define the color of the block that will contain the icon on Window's tile system.