Scroll

How to add custom icons for Safari browser on IOS devices

Safari web browser in IOS operating system (Apple mobile devices) has quick tab panel. It has following appearance:

In order to change the icon for your quick tab item, please follow these steps:

1. Create your icons in *.png format and use following dimensions of 16х16px, 76х76, 120х120 и 152х152 pixels. For example you can use this service. Please rename your icons to following names:

  • apple-touch-icon-precomposed.png
  • apple-touch-icon-76x76-precomposed.png
  • apple-touch-icon-120x120-precomposed.png
  • apple-touch-icon-152x152-precomposed.png.

2. Please create /icon folder in the root directory of your template and upload your images to it.

3. Please open /admin/templates/website/layout.tpl.php file and add the following code before second <?php tag:

<link rel="apple-touch-icon" href="/icon/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152-precomposed.png">

4. Save this file and upload to your server by replacing the already existing file. Also please add your website to quick tab again. Now your icon should change.

Please note: by updating your template to the latest version you will reset these changes so you will need to add your icons again.

Have more questions? Submit a request

Comments

Powered by Zendesk