Add iOS and Android Home Screen Icons To Your Website
So you have a slick mobile or responsive website… congratulations! Now what? How about a custom home screen icon to help further build your brand with mobile users! In this post, we will review the steps required to enable home screen icon support for your website. Mobile devices which support custom icons will display them whenever a user bookmarks or adds your site to their home screen. A custom home screen icon replaces the tiny default screenshot displayed by default on many devices (see below).
Here is a before and after illustration:
The first step is to create the actual icons which will replace the default screen shot. The replacement icon(s) can be created manually with a graphics program, such as Adobe Photoshop, or by using an icon generator.
Below are a couple of examples of online icon generators (currently free to use):
Once the new icons have been created, the next step is to FTP all the new icon files to the root directory of your website (e.g. www, public_html, etc…).
Lastly, add the required <link> tags in the <head> section of your page(s). If you need a point of reference within the <head> tag, try adding these lines right after the last <meta> tag.
Below is an example of the code to be added:
1 2 3 4 5 |
<link href="apple-touch-icon.png" rel="apple-touch-icon" /> <link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" /> <link href="apple-touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76" /> <link href="apple-touch-icon-iphone-retina-display.png" rel="apple-touch-icon" sizes="120x120" /> <link href="apple-touch-icon-ipad-retina-display.png" rel="apple-touch-icon" sizes="152x152" /> |
The above lines cover all supported devices and icons. You should only add lines for which an appropriate png file has been uploaded.
ShopSite
ShopSite merchants can add this code to a custom ‘Page’ or ‘Include’ template (Merchandising > Custom Templates). Most users are likely to bookmark the home page or a major landing page on your site, so you may want to focus there first. To add the code universally for all pages, it would be necessary to update a global header include template, or add to both page and product templates.
To verify the code has been added, open a browser and view the source code of the page. The new HTML lines should be present in the output.
Magento
Magento users, in most cases, will be able to add this code under System -> Configuration -> Design -> HTML Head -> Misc Scripts.
(click to enlarge)
To verify the code has been added, open a browser and view the source code of the page. The new HTML lines should be present in the output.
If the new lines are not appearing in the source code, try refreshing Magento Cache and FPC (if applicable). If the code still does not display, you will want to consult with your developer to see if the current theme supports the ‘Misc Scripts’ field.
Additional Resources
Reference for iOS icon sizes:
https://developer.apple.com/library/ios/qa/qa1686/_index.html
Reference for Android icon sizes:
http://developer.android.com/design/style/iconography.html
