Adding an iOS home screen icon for your website
On iOS devices using the Safari browser, you can add a shortcut to your home screen for a website. By default, the shortcut image thumb will display a screenshot of your website. Below we'll explain how to change that default and use an image of your choosing instead.
Creating and uploading your icon
In order for the icon to work correctly, it must use the following specifications:
- The image for the shortcut must be 150x150 pixels in size.
- Must be saved in .png format
- Must be titled apple-touch-icon (it is case sensitive)
Once you have created this image, upload it to the file manager in your site. We recommend adding this to a folder called 'Misc' (you may need to create it if you don't already have it), the reasons why explained below.
Adding the icon to your site
Once you have uploaded the icon, you will need to add a small piece of code to the <head> tag of the page you would like to use the icon for.
<link rel="apple-touch-icon" href="Misc/apple-touch-icon.png">
you'll note this path has 'Misc' in it, as per the folder instructions above, to make it easy for you to simply copy and paste this line above without needing to make any edits to it.
Visit this page for instructions on how to insert custom code to the head tag.
If the above has not worked, make sure you check against the 3 points above. And make sure you have placed that image into the 'Misc' folder.