Skip to main content

How to add home page icons for iOS and Android


How to add home page icons for iOS and Android?

I want iOS and Android to display a nice icon when a page is saved to the home screen.

For iOS, I must add the following links to the Head of the pages:

<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

For Android, I must add the following links instead:

<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">


Use an unescaped expression inside the Header Web Block that is present on all pages. If you include the image as a resource of the eSpace module you can use in the path "img/image_file.png".

unnamed (5).png


Note: Usually to include the "<link>" tag you can use the action AddLinkTag from HttpRequestHandler extension module. However, in this case you need to include the "sizes" attribute which is not supported by the action.