O'Reilly logo

Mastering Magento Theme Design by Andrea Saccà

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required