Adding a favicon

A favicon, or browser icon, is a small square image that displays next to a page's title in browser tabs and in other places across the web. Adding a custom favicon makes your Squarespace 5 site recognizable in a browser full of tabs or bookmarks.

Image requirements

When creating a favicon image:

  • Name the image file favicon.png.
  • Currently, .ico files aren't supported.
  • Favicon images work best across all browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px. These are the standard favicon dimensions, and while some browsers support larger favicon files, all will support that size.
  • In Internet Explorer, the favicon won't appear.

Step 1 - Upload the image to file storage

  1. In the Website Management bar, click File Storage under Data & Media.
  2. Add the favicon.png file to your file storage area, in General Storage (not a in folder).

file-storage.png

Step 2 - Add the favicon

  1. In your Website Management bar, click Website Settings under Structure.
  2. In the Advanced tab, scroll down to the Favicon (Favorites Icon) Display section.
  3. In the Icon Location drop-down menu, choose Use an icon stored in your File Storage area (favicon.png).
  4. Click Update Information.

add-favicon.png

Troubleshooting

The favicon should now display in the logged-out version of your site. To see the new favicon, open your site in a private browser

If you don't see the favicon:

  1. Open your site in a browser other than Internet Explorer. Internet Explorer doesn't display .png favicons.
  2. Clear your browser's cache and restart your browser.
  3. Ensure your image is a .png file and the image name is favicon.png. Squarespace 5 doesn't currently support .ico files.
  4. Ensure you added it to the main file storage area (not a folder).
Tip: While you're logged into your site, you'll see the Squarespace logo as the favicon.
Was this article helpful?
1 out of 2 found this helpful