A favicon is the small icon you see in your browser tab. It’s typically an illustration, graphic, or logo that identifies the website. Leaving the default Squarespace* favicon can make a site feel unprofessional, and replacing it with your own branded favicon helps to make your site memorabable and supports your brand identity.
This guide will walk you through the process of creating a favicon that meets Squarespace’s requirements and uploading it to your website.
Affiliate disclosure: Some of the links in this article are affiliate links, marked with an asterisk (*). Studio Founded may receive a commission from qualifying purchases made through these links, at no additional cost to you. You can read our full affiliate disclosure here.
Why Do You Need a Favicon?
A favicon should be added to any website. It adds to your site’s brand identity and sense of professionalism, and also makes your website easier to identify in browser tabs and bookmarks so visitors can return to it. We always add a bespoke favicon before launching a new Squarespace site.
How to Create a Favicon
You need to create your favicon before you can upload it. It’s very small, so it should be simple but recognizable, like an initial or brand icon. It should be between 100 × 100px and 300 × 300px. Just be sure to keep it square for results. Your file should be a PNG and no larger than 100KB.
To create your favicon, you can use tools like Canva, Adobe Express (or Photoshop if you’re a professional user), or Favicon.io.
How to Upload Your Favicon to Squarespace
Follow the 3 steps to upload your favicon:
I. Login to Squarespace
Start by logging into Squarespace* and navigating to your website (if you need guidance on logging in to Squarespace you can follow our tutorial).
II. Navigate to the Favicon Area
In your website’s sidebar, you can visit Settings > Website > Favicon, or use the search bar to search for “favicon”.
III. Upload Your Favicon
In the Favicon area, click the Upload Image button and select your file to upload. You can set the default favicon and an optional dark mode favicon.
Remember to save your changes.
Your favicon should now start to appear in your browser tab. Here’s an example of our favicon displaying in the browser tab:
If your favicon isn’t showing, remember that it might take some time for it to start to appear. You can try refreshing your browser, opening your site in a private browser, or clearing your cache.
FAQs
How do I create a favicon?
To create your favicon, you can use tools like Canva, Adobe Express, or Favicon.io.
What size should my favicon be for Squarespace?
Your favicon should be between 100 × 100px and 300 × 300px, and your file should be no larger than 100KB.
Should my favicon have a transparent background?
It can, but it doesn’t have to. If using transparency, remember to save your file as a transparent background PNG.
Where does my favicon appear?
Your favicon appears in browser tabs and bookmarks, and may also appear in Google Search Results.
Hire a Squarespace Expert
At Studio Founded, we’ve built over fifty bespoke Squarespace websites. We’re Squarespace Circle Platinum members, and Squarespace Marketplace Experts. If you would like support with your Squarespace site, get in touch. We’d love to support you.
The Liren Squarespace template by Studio Founded.
