On iOS devices using the Safari browser, you are able to add a shortcut to your home screen to any site online. By default, these shortcuts will display as a screenshot of the website. This article will explain how to set an icon to your website so that when it is saved onto iOS home screens this will display instead.
The image for the shortcut must be 150x150 pixels in size. This will allow it to be used across all iOS devices - those with regular displays and retina displays too!
Additionally, in order for the icon to work correctly, it must follow the following specifications:
Once you have created your icon, you can then upload it into the Content >> Files area within your Create account (not the images area).
To upload the icon:
Once you've uploaded the icon, you will need to add a small piece of code to the Custom <HEAD> of the page you would like to use the icon for - if you want to use it for any page that a shortcut is created for, you'll need to paste the code into each page individually. The code is below:
<link rel="apple-touch-icon" href="/sitefiles/12345/678/90/apple-touch-icon.png">
The informational following the href is the file path for the file you just uploaded. This must be the file unique to your site.
To get the file path for the icon that you've uploaded, simply click the 'link' icon on the 'Files' section.
This will then displayed the URL for the icon.
Copy and paste this file path exactly as it appears into the code below.
<link rel="apple-touch-icon" href="INSERT_FILE_PATH_HERE">
To then add this code to your custom <HEAD>:
It can take several hours for the icon to update once your site is published. When you're ready to test, simply follow the steps below on your iOS-enabled device (such as an iPad or iPhone):
If you do not see the icon you uploaded, please double-check that you have followed the steps above, including formatting the file as required.