Create an iOS touch icon for your site by following these simple steps to let users add your website to their device's home screen with a custom icon.

Step 1: Prepare Your Icon Image

• Create a .png file (non-transparent)
• Recommended size: 180x180 pixels
• Use design similar to your favicon for consistency

Step 2: Upload the Icon

1. Open page editor on a Layout page
2. Add text for the link
3. Highlight text and click the Link icon
4. Select Files tab
5. Click Add File to upload your icon
6. Click Add Link to insert

Step 3: Get Icon URL

1. Click the linked text
2. Copy the file URL

Step 4: Add Code

1. Open Code Injection panel
2. Paste this code in the Header field:

<link rel="apple-touch-icon" href="/s/file-name.extension">

3. Replace

   /s/file-name.extension

   with your copied URL
4. Click Save

Step 5: Test Your Icon

1. Visit your site on an iOS device
2. Use the Share option
3. Select "Add to Home Screen"
4. Your custom icon will appear

Need Help?

• Visit Apple's developer site for icon guidelines
• Consult Squarespace forums for community support
• Consider hiring a Squarespace expert for custom code assistance

Note: This customization requires basic coding knowledge and is not supported by standard customer service.

Related Articles

Previous Articles