Website Building » Squarespace » How Do I Change Favicon in Squarespace?

How Do I Change Favicon in Squarespace?

Last updated on December 29, 2022 @ 6:35 pm

If you’re using Squarespace, you may have noticed that there is no option to change the favicon. A favicon is the small icon that appears in the browser tab next to the website name. While it may not seem like a big deal, having a custom favicon can help your website stand out and look more professional.

Luckily, there is a workaround that will allow you to change the favicon in Squarespace. All you need to do is add a little bit of code to your site.

First, you’ll need to create a favicon. You can do this with any image editor, such as Photoshop or GIMP. The image should be 16×16 pixels and saved as a .ico file.

Once you have your favicon, upload it to Squarespace. Then, go to the Design tab and click on Custom CSS. Paste the following code into the box:

PRO TIP: Please be aware that changing your favicon in Squarespace may result in unexpected changes to your website’s appearance. If you are not comfortable making changes to your website’s code, we recommend contacting a Squarespace expert for assistance.

link[rel="shortcut icon"] {
display: none;
}

body {
background-image: url(Your-favicon-url);
}

Replacing "Your-favicon-url" with the URL of your favicon. Be sure to include http:// or https:// at the beginning of the URL.

Save your changes and that's it! Your new favicon should now be appearing in your browser tab.

While changing the favicon in Squarespace isn't difficult, it does require adding custom code to your site. If you're not comfortable doing this, you may want to hire a Squarespace expert to help you out.

Adding a custom favicon is a great way to make your Squarespace site look more professional and unique. With just a few lines of code, you can change the default favicon and add your own.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.