Creating an Apple Touch Icon enables iOS users to add your website to their device's home screen as a visually appealing bookmark alongside their apps.

Follow these steps to set up an Apple Touch Icon:

Step 1: Create and Upload Icon

Create a non-transparent .PNG file that matches your favicon or site logo's design. To upload:

• Open any page editor
• Add text for a temporary link
• Click the link icon in the toolbar

In the link editor:

• Select the [File] tab
• Click [Add File]
• Upload your icon
• Click [Add Link]

Step 2: Get Icon URL

Click the linked text and copy the file URL.

Step 3: Add Code

Access the Code Injection panel and add this code to the header:

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

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

Step 4: Test on iOS Device

To add the site to your home screen:

1. Visit your website on an iOS device
2. Tap the Share button
3. Select "Add to Home Screen"

Note: This customization requires basic coding knowledge. For additional support:

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

Related Articles

Previous Articles