photo of a laptop screen showing browser tabs and favicons. For a blog post on how to change your favicon on squarespace

How to add or change a favicon on your Squarespace site: A step-by-step guide

Looking to add a favicon to your Squarespace? Look no further, our how to add or a change a favicon guide for Squarespace will walk you through the what you need and the steps to take to get your very own custom favicon onto your Squarespace website.


What is a Favicon?

A favicon is a small, yet essential element of your website that often goes unnoticed by many. This tiny icon, which appears in the browser tab next to your site’s title, plays a crucial role in your website’s branding and user experience. If you’re using Squarespace and want to add or change your favicon, this guide will walk you through the process step by step.

Why is a Favicon important?

Before we dive into the how-to, let’s quickly touch on why having a favicon is important:

  1. Brand recognition: A favicon helps your website stand out in browser tabs, bookmarks, and history lists. It’s a visual cue that reinforces your brand identity.
  2. Professionalism: Websites with a custom favicon appear more polished and professional, giving visitors a positive first impression.
  3. User experience: Favicons make it easier for users to identify and return to your website when they have multiple tabs open.

Now that you understand the importance of a favicon, let’s get into how to add or change it on your Squarespace site.

How to add or change a Favicon on Squarespace:

Step 1: Prepare your Favicon image

Before you can upload your favicon to Squarespace, you’ll need to create or choose an image. Here are some things to bear in mind whilst preparing your favicon.

  • Icons should be in PNG file format and recommended sizing is between 100 x 100px and 300 x 300px.
  • Ensure your desired favicon is no larger than 0.1mb in size.
  • Keep the design simple and recognizable, as the favicon will appear very small.

Step 2: Log in to your Squarespace account

  1. Go to Squarespace and log in to your account.
  2. Once logged in, select the website where you want to add or change the favicon. 

Step 3: Upload a Favicon to your Squarespace website

  1. Once you're on the selected site you should see this side panel on the left. Scroll down to the bottom and select the cogwheel icon (settings).

    Screenshot of settings for how to change your favicon on Squarespace



  2. The menu item 'Website' should be selected by default but in case it isn't, select 'Website'. On the main element of the page you'll see a list of settings you can select. The fifth item down the Website settings list is 'Favicon' where you can 'Adjust your site's favicon'. Click on this.

    Screenshot for favicon settings in the backend of squarespace how to change your favicon on Squarespace



  3. Next you'll see the Favicon upload section. Here you can upload an icon to display in the browser tab next to your site title to help make your site recognisable to users. You have the option to either just upload the default, or to also upload a dark mode equivalent favicon (which is optional). Select the 'Add a favicon' button.

    Screenshot for add a favicon button in the backend of Squarespace for how to change your favicon on Squarespace



  4. After clicking 'Add a favicon' you'll be presented with two options: 'upload file' or 'select from library'. If you're uploading the icon for the first time, select 'upload file' as your desired favicon won't already exist in the library. If however you have previously uploaded the icon another way, or uploaded it previously, changed it to a different favicon and wish to change it back - then choose 'select from library' as your icon will already be in the media library.

    In this example we're going with 'upload file' so select that.

    Screenshot of upload file or select from uploads for how to change your favicon on Squarespace



  5. From there you will be able to select your icon from your local PC folders. Once added you will have two further options available to you in case you need them: 'replace' and 'edit'. In this example we don't need to use either of these for our favicon. 

    Screenshot of selected favicon in the backend of squarespace for how to change your favicon on Squarespace


    In case you want to use them, 'replace' prompts either uploading a new icon or selecting from library like in the screenshot above. 

    Edit opens an editor where you can adjust blur, contrast, sharpness etc of your icon.

    Screenshot of favicon edit settings in how to change your favicon on Squarespace



  6. If you're happy with your favicon upload for Squarespace, click the 'save' button in the top right of the page.

    Screenshot of the save button in the backend of Squarespace for how to change your favicon on Squarespace



  7. After the save has finished, refresh the page and congratulations, your uploaded favicon is now visible on your Squarespace website's browser tab next to your website's title. In this example we're using our Squarespace template Athena Active which is available to purchase from our shop.

    Screenshot of the browser tab Athena Active showing a working favicon from how to change your favicon on Squarespace


    Troubleshooting your Squarespace Favicon

    • Not Seeing Your Favicon? If your new favicon isn’t showing up right away, try clearing your browser’s cache or viewing your site in an incognito window.
    • Favicon Not Showing on Mobile? Ensure your favicon image is in the correct format and size. Some mobile browsers may have specific requirements.
    • Design Feedback: If your favicon looks blurry or unclear, try using a simpler design or a higher resolution image.
    • Favicon upload to Squarespace fails? If your favicon fails to upload, double check your the format, dimensions and size of you icon. As mentioned above Squarespace only accepts the following for a favicon.

    Congratulations on uploading your Favicon to your Squarespace website!

    Adding or changing a favicon on your Squarespace site is a simple yet effective way to enhance your branding and user experience. With just a few clicks, you can ensure your site looks professional and stands out in the browser tabs of your visitors. For new users it might seem intimidating to learn how to upload a favicon to Squarespace, but hopefully this guide has assured you how simple it is, and our guide will be here for you to refer back to if you ever need to remind yourself in the future.

    At Ambedo Web, we’re dedicated to helping you get the most out of your website. Whether you’re looking for more tips and tricks or need a new website, we’ve got you covered. Explore our range of Squarespace templates, WordPress themes, and Shopify themes, or let us help you with a bespoke website build tailored to your needs.

    Ready to take your website to the next level? Check out our store and our other blog posts for more expert advice!

    Back to blog