Method to create Apple Touch Icon on Squarespace Website
If you have properly declared Apple Touch Icon, it makes it easy for users of iOS devices to bookmark your Squarespace website on the homepage of iPhone.
In case you want to declare a separate favicon for your website, here is the method. This favicon will serve as a bookmark image on the homescreen of iOS devices. Please note that this example guide uses Squarespace CMS.
The method is almost similar for other platforms such as WordPress and Wix. For Wix website, the method is slightly different. [RD]
Create a 192 x 192 or 180 x 180 px PNG favicon which must not be transparent. Your single 192px square image will be used on iPhone or iPad because according to Apple documents, if you do not provide the exact recommended size, the smallest icon larger than the recommended size is used. For example, Apple has recommended 180x180 px size image for iPhone, so our favicon of 192 x 192 pixels will be automatically resized to be used for iPhone home screen. [RD]
Next, highlight any text on a layout page and select the Link icon in the text editor toolbar and click the gear icon. For example, I used the ‘Apple Touch Favicon’ text for this link.
On File tab in Link Editor, upload the favicon you created for Apple Touch Icon. Click ‘Save’ then open the link again and save it so that image link appears. Copy the image file URL and paste it temporarily in some word processing document. In my case the image URL is “/s/apple-touch-icon.png” because I had mentioned the title as ‘apple-touch-icon’ to the PNG image in my computer. Click ‘Apply’ and then select ‘Save’ on the top left corner of website.
Access Home menu > Settings > Advanced > Code Injection.
Copy and paste <link rel="apple-touch-icon" href="/s/favicon.png"> into the Header code injection field.
Now replace the /s/favicon.png with the image URL which is /s/apple-touch-icon.png in my case. There should not be a space at the start or end of tag. Click Save.
In my example, the final code will look like this. <link rel="apple-touch-icon" href="/s/apple-touch-icon.png">
Now test it. Open your website using your iPhone. Use the Share option to add your site to the home screen of iPhone. The favicon of your website will be added to the home screen in masked edges.
You have successfully declared the Apple Touch Icon for your website.
Please note that this icon will work for all pages of your website.
More Resources
Tips for Designing Favicon which is an Awesome and Distinguishably Visible.
Squarespace Site Favicon Browser Icon – Key Tips.
