Adding a site icon on iOS devices

Adding a site icon on iOS devices

false

Last updated March 11, 2026 21:21

Create an Apple Touch Icon so iOS users can bookmark your site on their device's home screen.

When you create an Apple Touch Icon, visitors can bookmark your site on their iOS devices (iPhone, iPad, or iPod). The bookmark will be an icon inline with other apps or bookmarks on a home screen.

To review Apple's image guidelines for these icons, visit their image guidelines page.

The solution in this guide includes code injection, which is available on the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan.

Step 1 - Upload the icon image

Create the icon for the site. The icon must be a .png file and can't be transparent. We recommend using the same design as your favicon or site logo for a consistent look.

After creating the image, open the page editor for any layout page on your site, and enter text that will act as a link. Highlight the text and click the Link icon in the text toolbar.

The link editor will open. Click the Files tab, then click Add File to upload your touch icon image file. Click Add Link to insert the link.

Step 2 - Get the icon image URL

Click the linked text again, and copy the file URL. The file URL looks like this:

/s/file-name.extension

Step 3 - Add code injection

Open the Code Injection panel.

Copy and paste the following code into the Header code injection field:

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

Replace /s/file-name.extension with the URL you copied for your icon file.

Click Save.

Step 4 - View your touch icon

Visit your site using your iOS device. Use the Share option to add the site to your home screen. It will look something like this:

Note: This code-based customization falls outside the scope of Squarespace support. We highly recommend that you have coding knowledge before adding code to code injection. While we can’t offer more help on this topic, there are many resources available that can point you in the right direction:

For help with Apple Touch icons, visit the Apple developer site.

Visit the Squarespace Forum, our customer and developer forum.

Learn best practices for adding custom code.

Read our general guide on code-based customizations.

Hire a Squarespace Expert to help build custom code for your site.

Was this article helpful?

Yes No

75 out of 139 found this helpful

Yes No

Adding a site icon on iOS devices