Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

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