Customizing Site Icons

Site icons (aka touch icons) are the favicons of mobile devices and tablets.

Prerequisites:

You need to have following sizes of the image file you want to use as icon:

1. 60x60

2. 76x76

3. 120x120

4. 152x152

5. 320x418

6. 1536x2008

7. 2048x1496

Default site icons can be configured using the following method:

1. Go to Site Admin > CMS

2. Create new "Site Page"

3. Provide a title <cms_file_title> (example: Images) to the page and some content and save draft.

4. Click on attachment icon to upload your images

5. Choose your image files and upload them

6. Save draft, Publish and close the site page edit screen

7. Go to Site Admin > Site Details and open Customization tab

8. Add following properties :

FAVICON_APP_60=<cms_file_title>/image_name_60x60

FAVICON_APP_76=<cms_file_title>/image_name_76x76

FAVICON_APP_120=<cms_file_title>/image_name_120x120

FAVICON_APP_152=<cms_file_title>/image_name_152x152

FAVICON_STARTUP_PORTRAIT_IPHONE=<cms_file_title>/image_name_320x418

FAVICON_STARTUP_PORTRAIT=<cms_file_title>/image_name_1536x2008

FAVICON_STARTUP_LANDSCAPE=<cms_file_title>/image_name_2048x1496

where <cms_file_title> is the title of the CMS page you provided in step 3 and

image_name_WxH is the name of the corresponding image of the WxH resolution

For example, as per screenshots, properties will be :

FAVICON_APP_60=Images/customImage60.png

FAVICON_APP_76=Images/customImage76.png

FAVICON_APP_120=Images/customImage120.png

FAVICON_APP_152=Images/customImage152.png

FAVICON_STARTUP_PORTRAIT_IPHONE=Images/myCustomImage320x418.png

FAVICON_STARTUP_PORTRAIT=Images/myCustomImage1536x2008.png

FAVICON_STARTUP_LANDSCAPE=Images/myCustomImage2048x1496.png

9. Save the changes by clicking on save button.

Quick Links