How to Add a Favicon to a Squarespace Website
Learn how to add a favicon on your site so your logo always shows in the browser tab.
When someone visits your website, one of the first things they’ll notice in their browser tab is the tiny icon next to your site name. That little image is called a favicon (short for “favorite icon”), and it’s a key part of your branding online.
The green “A” logo is the favicon
Changing this is key to showcasing your brand on your website instead of the generic Squarespace logo.
By default, Squarespace shows its gray block icon if you don’t set a favicon. And honestly, that’s one of the most obvious signs that a site is unfinished or designed by someone new to Squarespace. I’ve seen clients launch their websites and leave the Squarespace block showing for months without realizing how unprofessional it looked.
The good news is, adding your favicon is quick and easy — and it makes your site feel polished and on-brand right away. Here’s how to do it.
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to add a favicon to your Squarespace website!
-
[00:00:00.00]
Hey, everyone. In this video, I want to show you how to add a Fabricon to your Squarespace website. So that way, when you're in a browser, it actually shows your logo instead of the Squarespace block. Because honestly, that's one of the most telling signs that someone is either new to web design or they just don't really know what they're doing on Squarespace. In fact, I've seen a few of my clients skip this step and have their website up for a very long time without changing this, even though it's contributing to their website looking a little bit less professional because it's not their branding that they're showing, it's still Squarespace. So let's fix it. Okay, so here I am in a demo Squarespace website. As you can see up here, we don't have a Fabricon because it's showing the gray Squarespace block icon. So the first thing that we're going to want to do is make sure that we have our files and And I have two ready to go that are 150 pixels square. And so what we're going to do is come into the website here, go to settings, fabicon here, and then we have two to upload.
[00:01:19.07]
So we're going to do the default. And then this is optional, but we're going to do the dark mode as well. So it says down here, Icons should be in PNG file format and recommended sizing between 100 pixels squared and 300 pixels squared. For our purposes, the 150 squared is fine. We're going to click Add. We're going to upload, and then I'm going to go and find where I have the favicons. And then I'm going to upload the default one here. So we've got this logo for the default mode, and then we're going to add the white one for the dark mode. And once those are uploaded, then we'll just click Save, and then we'll exit that out. And then in a couple of minutes or whenever your computer can refresh, if we were to back out of this. Okay, so while we're in the dashboard, if we just click it again. Clicking back into the website a few times, I finally see it up there in the corner. It did load the Fabricon. This is the default one, like I said. Then if you get on a device that is in dark mode or maybe someone has a browser in dark mode, it will show the white icon instead.
[00:02:52.06]
So that is how you upload a Fabricon to your Squarespace website. Be sure to do that because you do not want the generic Squarespace block in your new website. It's just going to look less professional than you want it to, and you really want people to know that it's you, it's your brand and your business right off the bat. So if you found this video helpful, go ahead and give it a like and hit the subscribe button to see more videos like this.
Step 1: Prepare Your Favicon File
Before uploading, make sure you have a square version of your logo saved as a PNG file. Squarespace recommends sizes between 100px and 300px square. I usually use 150px square, which works perfectly.
For best results, you may also want to create two versions:
A default version (for light mode)
A white or simplified version (for dark mode)
Step 2: Upload Your Favicon in Squarespace
Log in to your Squarespace site and open the Dashboard.
Go to Settings → Favicon.
Click Add and upload your favicon file.
Upload your default logo for standard display.
(Optional) Upload your alternate version for dark mode.
Once uploaded, click Save.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 3: Refresh and Check
After saving, it may take a couple of minutes for your favicon to appear. Try refreshing your site or reopening it in a new browser tab. You should now see your custom favicon instead of the default Squarespace block.
If you’re browsing in dark mode, Squarespace will automatically swap to your alternate favicon, if you uploaded one.
Why This Matters
Your favicon is a small but powerful detail. It tells visitors instantly that they’re on your website — not just another Squarespace site. It reinforces your brand, makes your site look more professional, and adds that extra layer of polish that builds trust.
Don’t skip this step. It takes just a few minutes but has a big impact on how people perceive your business.
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
A favicon is the small icon that appears in your browser tab, bookmarks, and sometimes search results. It’s usually your logo or a simplified version of it, and it helps reinforce your brand identity online.
-
Squarespace recommends favicon images between 100 × 100 pixels and 300 × 300 pixels. in this blog post, adn the video tutorial, I used a 150 × 150 pixel PNG file, and it works perfectly for most sites.
-
It’s optional, but highly recommended. Adding a dark mode version ensures your logo looks clean and visible when visitors are browsing in dark mode.
-
It can take a few minutes (and sometimes a refresh or two) before the new favicon shows up in your browser tab. Try clearing your cache if you don’t see it right away.
-
A favicon adds professionalism and trust to your site. Without it, visitors see Squarespace’s default block logo instead of your brand, which can make your website look unfinished or less credible. I highly recommend you add one!
