How to Change Favicon on Squarespace in 3 Easy Steps

how to add a favicon in Squarespace

The Squarespace favicon (or browser icon) is a small icon that represents your website.

It appears in the address bar of a browser, the bookmarks section, and the history folder.

It’s also supported in tabbed browsing, so you can see which websites you have open at a glance!

Browser icon example

If you have a Squarespace website, a high-quality favicon is a simple way to make your site stand out and boost brand awareness.

In this short guide, we’re going to look at how to change the favicon on your Squarespace site.

This could be your business logo or an image of something that represents you. Here are are some favicon examples:

favicon examples

How to Change Favicon on Squarespace

Before you start, it’s important to have a favicon ready to upload. If you don’t, then scroll down to the next section, to read more about the recommended format and size of favicons.

The process used to change the Squarespace favicon will depend on if you’re using version 7.0 or version 7.1. The good news is it’s super simple to do on both versions!

How to Change Favicon on Squarespace 7.1

  1. Go to the Home Menu, click Design and click Browser Icon

  2. Add the image you want to use – either by dragging it to the image uploader or choosing a file from your computer

  3. When you’re happy with how your favicon looks, click Save

You can change your favicon at any time – just go back to Browser Icon and replace it with a new image.

Add a browser icon in Squarespace

How to Change Favicon on Squarespace 7.0

  1. Go to the Home Menu, click Design and click Logo & Title

  2. Choose Browser Icon (Favicon). Add the image you want to use – either by dragging it to the image uploader or choosing a file from your computer

  3. When you’re happy with how your favicon looks, click Save

Recommended Format and Size for Favicons on Squarespace

While it’s recommended that your favicon is 100px by 100px or 300px by 300px, a favicon is generally resized to be 16px by 16px.

This means it’s important that your favicon is simple and easily identifiable, even when it’s small.

Squarespace accepts favicons in PNG and ICO formats.

You might want to bear in mind that Internet Explorer doesn’t support PNG favicons, so your favicon will not show to people still using IE.

However, Internet Explorer has now been officially retired in favour of Microsoft Edge, so there aren’t a lot of people still using this browser!

If you don’t upload your own favicon, Squarespace will use its default browser icon on your site – a dark cube.

Squarespace default favicon (browser icon)

Help! My Squarespace Favicon isn’t Showing!

It might take a little while for your brand new favicon to show up in your browser, so give it a few minutes once you click the Save button.

You can also try reloading the page.

Reload page to update Squarespace browser icon

If you still can’t see it, it’s likely that the old version is still cached on your computer. Try clearing your browser’s cache – you can find out how to do this here.

Don’t forget – if you’re looking for lots of cool ways to customize your Squarespace website, Spark Plugin has over 100 stunning customizations.

Check out our latest customizations and get your free trial today.

Rasmus Myhrberg

Founder of Spark Plugin, a transformative design tool for Squarespace. He has been working with UI and UX design for the past 15 years, and has founded three design-focused companies during this time.

https://sparkplugin.com
Previous
Previous

10 Most Useful Squarespace Drop Down Menu Styles

Next
Next

Blogging on Squarespace: Create a Blog in 5 Minutes