How to Add a Favicon to Squarespace
Does your website still have that default little 3D cube in the browser tab? It’s a small detail, but it makes your site feel generic. Adding a custom favicon (also called a browser icon) makes your site look polished, professional, and on-brand.
Whether you’ve got professional branding already or need a quick DIY solution, I’ll walk you through everything you need to know about adding a favicon to your Squarespace website.
What is a Favicon?
Favicons are those tiny icons seen in browser tabs, next to a website name, and in bookmarks. They make it easier for visitors to spot your site, especially when they have multiple tabs open.
For example, if you’ve got your email, social media, and work-related tabs open, a clear favicon helps users immediately recognize your website. It’s a simple way to enhance user experience while keeping everything consistent with your branding.
Squarespace websites default to a plain 3D cube favicon. While there’s nothing wrong with it, it’s kind of like leaving a tag on your new shirt. It says, "I haven’t personalized this yet." Let’s change that.
If You Have Professional Branding
If a designer created your branding, chances are you already have a favicon-ready design. Designers often provide submark logos, which are smaller symbols or initials tied to your brand identity.
For instance, my business is "Erin Fitzsimmons," so my submark could include the letters "EF" in my brand colours. These logos are the perfect size and style for favicons.
No Branding? No Problem!
My suggestions are:
A coloured circle in one of your brand colours.
An emoji that fits your website’s theme.
How to Create a Coloured Circle in Canva
Canva is a popular, user-friendly tool, and you don’t need to be a design expert to use it. Follow these steps:
Open Canva and create a custom design. Make sure it’s 100 x 100 pixels to 300 x 300 pixels for best results.
Add a circle element from the “Elements” section. Stretch it to fill the entire canvas so there’s no extra white space.
Choose your brand colour for the circle. A bright, bold colour often pops better, especially on light or dark browser themes.
Download your design. If you’re using Canva Pro, you can make the background transparent before downloading. If not, don’t worry—there’s a workaround.
Removing the Background
To remove the white background from your circle:
Go to remove.bg.
Upload your circle image, and the tool will automatically erase the background.
Download the new image and save it with a descriptive name for easy access.
Pro Tip: Compress Your Image
Before uploading any image to your website, compress it! Compressed images load faster, I use compresspng.com.
Using Emojis as Favicons
Want to try something a bit playful? Emojis can make fun, memorable favicons.
Here’s how to do it:
Search for an emoji that fits your website theme. For example, a microphone for a podcast site.
Use a website like emojirepo.org to download the emoji as a small image.
Compress the emoji image.
Adding Your Favicon to Squarespace
Now that your favicon is ready, it’s time to upload it to Squarespace.
Go to Settings (the gear icon).
Under Website, choose Favicon.
Upload your favicon file.
Save your changes.
Once uploaded, refresh your website in a browser. Open it in a no redirect or incognito mode to ensure you’re seeing the updated favicon.
Creating a Dark Mode-Friendly Favicon
Your favicon should stand out on both light and dark backgrounds.
For black icons: Create a light version for dark mode so it’s visible.
For white icons: Do the reverse and make a darker version.
Bright colours: If your brand uses vibrant colours, these often look great in both modes.
Squarespace lets you upload a dark mode alternative, so take advantage of that feature if your favicon needs it.
Conclusion
Adding a favicon to your Squarespace website is a small but impactful way to make your site look professional and personal. Whether you’re using a submark, a simple DIY design, or even a fun emoji, it’s a detail that makes a difference.
Remember, your favicon is like your site’s signature, it helps users recognize you at a glance. Taking a few minutes to create and upload one shows you care about the details, and that’s always worth it.
