To add a site icon on iOS devices, follow these simple steps to create an Apple Touch icon that lets users bookmark your site on their home screen:

1. Create and Upload the Icon

• Create a .png file (non-transparent)
• Use your favicon or logo design for consistency
• Upload the image through the page editor
• Click the Link icon in the text toolbar

2. Upload Through File Manager

• Select the File tab in the link editor
• Click "Add file" to upload your icon
• Click "Add link" when done

3. Get the Image URL

• Click the linked text
• Copy the file URL

4. Add Code Injection

• Access the Code Injection panel
• Paste this code in the Header field:

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

• Replace "/s/file-name.extension" with your copied URL

5. Test the Icon

• Visit your site on an iOS device
• Use the Share option to add to Home screen
• The icon will appear like this:

Note: This is a code-based customization not covered by standard support. For additional help:

• Visit the Apple Developer site
• Consult the Squarespace Forum
• Review custom code best practices
• Consider hiring a Squarespace Expert

Remember to follow Apple's image guidelines for optimal results.

Related Articles

Previous Articles