Create custom icons for iOS users to personalize your site's home screen bookmark.

Before starting, familiarize yourself with Apple's icon design guidelines.

Step 1: Prepare and Upload Icon

Create a .png icon file (non-transparent) that matches your favicon or logo. To upload:

1. Open the page editor on a Layout page
2. Enter link text
3. Highlight text and click the Link icon in toolbar

In the link editor:

1. Select Files tab
2. Click Add File
3. Upload your Touch Icon
4. Click Add Link

Step 2: Get Icon URL

Click the link text and copy the file URL.

Step 3: Add Code

1. Access Code Injection panel
2. Paste this code in the Head field:

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

3. Replace

   /s/file-name.extension

   with your copied URL

Step 4: Test Icon

Visit your site on an iOS device and add it to your home screen using the Share option.

Important Note: This customization requires basic coding knowledge. For assistance:

• Visit Apple Developer site for icon guidelines
• Consult Squarespace forums
• Review custom code best practices
• Consider hiring a Squarespace expert

Related Articles

Previous Articles