Add a Custom Favicon in Squarespace 7.0 and 7.1
How to Add a Custom Favicon in Squarespace [7.0 + 7.1]
There is no smaller or easier element to creating a website that will make your site look as polished as having a custom favicon. Working with a Squarespace web designer can bring that heightened level of elegance and sophistication to your website, but there are many design elements that anyone can easily add.
No, I’m not referring to a transformer or a complicated code element. What developers used to refer to as a “browser icon” we now refer to as a favicon, although browser icon is the more literal description of what a favicon is and how it functions.
[The websites from left to right, if you are curious, are The New York Times, Twitter, Compass, NPR, The Atlantic, Reddit, YouTube, West Elm, Apartment Therapy, Better Homes & Gardens, Target and National Weather Service and they were actually all my wife’s open tabs this morning.]
Here is the search bar of a browser window - any user could easily glance at these open tabs and find Twitter or Target even with no other information. Simply because all of the above websites utilize a custom favicon to showcase their brand.
As a business owner, or a teacher, or as anyone looking to create and keep an audience - you want people to be able to find, bookmark and return to your content often. If a potential customer visits your website, your favicon will show up in their browser’s bookmarks bar, their browsing history, as well as other places across the web.
Google now displays favicons in mobile search results, which means that they’re also important for good SEO and improving your search engine ranking.
Tips for Making Your Favicon
So now that you see the value in having a favicon, how do you get started making one?
There are two things to consider before uploading or creating your favicon:
It’s possible you can use a current logo! You’ll want to make sure that logo is readable on a small scale since the favicon is a 16x16 pixel size. You will also want to make sure the colors you use read well.
There is a possibility you might not be able to use your current logo, but it’s not uncommon for brands to use a modified logo for their favicon.
Here are two well known companies that use a favicon variation on their logo:
Once you know what logo or branding you want to use, you will want to design a usable image. I do recommend for clients who DIY their own design elements to have a paid account to a site like Canva. There are other sites that you can use, but Canva offers great and easy to use tools and their subscription upgrade is an inexpensive but highly valuable option.
When you are uploading your favicon, you will want to ensure the image is a minimum size of 100x100 pixels but no larger than 300x300 pixels. Even though this is much larger than the display size of a favicon, it will upload to Squarespace well and be clearly read.
You will also want to use a square template, and save your creation as a png.file on a transparent background.
Upload Your Favicon to Squarespace [7.0 and 7.1]
Adding a favicon in Squarespace
Uploading a Favicon for 7.0
You’ll start on your home screen and select Design. Under Design, you will select the first option which is for Logo & Title. Under Logo & Title, scroll the left hand side bar until you see the box that says Browser Icon [Favicon]. Select the upload option, upload your image and remember to select Save at the top when you are finished.
Uploading a Favicon for 7.1
You’ll start on your home screen and select Design. Under Design, you’ll select Browser Icon, and select the upload option. Don’t forget to click Save!
Each element that makes your website your own, from favicons to more advanced custom Squarespace design elements helps you continue to grow your reach and meet the goals of your business in 2024 and beyond,
Important Note: Sometimes Squarespace won’t show the favicon until you launch your site. If your website is launched and it’s still not visible within 24 hours, reach out to Squarespace support.
Your Designer
I'm Justin, a veteran Squarespace website designer with over 12 years of experience building websites. I've worked with every industry and type of business, building platforms for small businesses through to multi-million dollar companies. If you want to discuss a potential project, you can email me on info@justinmabee.com, or get in touch with me here. Alternatively, you can book a free 15-minute consultation call here.
