Friday, March 2, 2018

ADDING AN IOS HOME SCREEN ICON FOR YOUR WEBSITE

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.

Creating And Uploading Your Icon

The image for the shortcut must be 150x150 pixels in size. This will allow it to 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:

Must be saved in .png format

Must be titled apple-touch-icon

Once you have created your icon, you can then upload it into the files area within your Create account (not the images area).

To upload the icon:

Log into your Create account

Click 'Content' from the top menu

Click 'Files' from the left-hand menu

Click the 'Add File' button

Follow the steps to upload your image

Adding The Icon To Your Site

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: