iOS users can bookmark your website on their home screen by adding an Apple Touch Icon. Follow these simple steps to create one:

1. Create your icon image

• Format must be .PNG (no transparency)
• Use your favicon or logo design for consistency
• Follow Apple's image guidelines for proper dimensions

2. Upload the icon image

• Open the page editor for any layout page
• Add link text and highlight it
• Click the link icon in the toolbar
• Choose Files tab and select Add File
• Upload your icon image
• Click Add Link

3. Copy the icon file URL

• Click the linked text again
• Copy the complete file URL

4. Add the code Open Code Injection and paste this in the header:

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

Replace

/s/file-name.extension

with your icon's URL

5. Test the icon

• Visit your website on an iOS device
• Use the Share menu
• Select "Add to Home Screen"
• Your icon should appear with other apps

Important notes:

• Icon must not be transparent
• Custom code modifications require basic coding knowledge
• Test across different iOS devices to ensure proper display
• Changes may take time to appear due to caching
• Regular icon updates help maintain brand consistency

For additional assistance, consult:

• Apple's developer documentation
• Your web developer
• Online coding communities
• Squarespace experts

Remember to validate the icon across different iOS devices and screen sizes for optimal appearance.

Related Articles

Previous Articles