How to Add a Custom Favicon to Your Squarespace Website

Branding has so much meaning when it's about being digital. And there is this least known yet highly important part of it, which is your favicon in your site. For all users that may face upon your brand, that little icon can make a difference. In this video, I will show you how to replace the default Squarespace favicon with your own unique logo. This will elevate your professionalism and make your brand more recognizable.

Watch the VIdeo

Check out the YouTube video below 👇

Understanding What a Custom Favicon Represents

A favicon is a "favorite icon" which appears in the tab of a browser, lists of bookmarks, and results of a search on mobile devices. An essential part of a website's identity, it's what makes the site easy to recognize and easy to get back to with just one click out of dozens open at one time. By customizing this icon, you'll not only increase brand visibility but also impart a professional look to your site, moving away from the generic Squarespace logo to something distinctly yours.

Step by Step to Add Your Favicon on Squarespace:

#1 Navigate to Settings

It all starts by personalizing your favicon at the backend of your Squarespace site. Move on to the "Settings" menu, and you will land on it for the simple modifications that can be made to your website.

#2 Logo & Title Section

Click on 'Website' under 'Settings' and then click on ‘Favicon.’ This is where Squarespace is going to allow you to upload your custom favicon.

#3 Upload Your Favicon

If it's a new file, you'd click on "Upload File," and then locate the image you want to serve as your favicon. If your desired icon had already been uploaded by you on Squarespace, you simply click "Select from Library" and choose the image. We will now upload your favicon file. Your favicon file should be a .PNG or .ICO format, ideally 100x100 pixels to have good resolution for all devices.

#4 Dark mode-enabled

Before saving your favicon, just look at it in dark mode. Unless your logo is white or a light color, of course, upload a variant in which it would look good on dark backgrounds so that your brand could always be noticeable.

Step 5: Save and Preview

After uploading your favicon and making your final dark mode adjustments, hit save. Then, navigate out of the settings to view your site's tab and see your new favicon in action.

Customizing your Squarespace favicon is such an easy but valuable way to emphasize online branding. By giving your logo such prominence on browser tabs, your site adds that professional touch and immediately identifies it to your audience.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websley.com. You can also schedule a free 15-minute consultation call