How to Add a Favicon to Squarespace
Your favicon might seem like a small element of your website, but it helps visitors quickly recognize your brand and gives your site a more professional feel. In this guide, we’ll walk you through the steps to add your favicon in Squarespace, so your site stands out even in the tiniest details.
What is a favicon/browser icon?
A favicon (or browser icon) is that tiny icon you see next to a website’s name in your browser tab. You’ll also see favicons in places like Google search results, your favorites, bookmarks, and browser history. It’s like a mini logo that helps people quickly recognize your site, especially when they’ve got a bunch of tabs open.
How to add a favicon to Squarespace
Changing your website’s favicon in Squarespace is fairly straightforward. Follow these steps:
Navigate to your website’s Settings.
Click the Website tab.
Choose Favicon.
Upload your favicon file.
If your favicon doesn’t look noticeable in dark mode, you can upload another version under Dark Mode. This might be as simple as adding a light background behind your favicon if it has colors that are not noticeable in dark mode.
Save your changes.
What file type and file size?
When uploading your favicon for your Squarespace site, it’s important to get the right file type. Your favicon should be a small square image, and Squarespace recommends dimensions between 100px x 100px and 300px x 300px. Just make sure the file size doesn’t go over .1MB. Squarespace also recommends you use a PNG file format. This helps your favicon look sharp and clear across the internet!
Designing your favicon
Your favicon is an important part of your website, so let’s go over some useful tips for creating a standout favicon.
DIY vs hiring
When it comes to designing your favicon, you have two main options: DIY or hiring a pro. If you're feeling creative, going the DIY route can be fun and budget-friendly. Plus, with tools like Canva, you can easily create a great favicon—it's user-friendly and offers tons of templates to get you started. On the other hand, hiring a designer can save you time and their skills can get you a unique, high-quality design that perfectly matches your business. Think about your budget, time constraints, and skills to decide which route works best for you!
Tips for a good favicon
Creating a standout favicon is all about making your brand easily recognizable at a glance. It should look great but also make it easier for users to switch between tabs, scroll through their history and bookmarks, and choose a Google search result. Here are a few tips to help you design an effective favicon:
Use your brand colors: Stick with your brand colors to keep things consistent. This helps make your favicon easily identifiable and reinforces your brand identity every time someone sees it.
Incorporate elements of your logo: If you can, include recognizable parts of your logo. This way, users will associate the favicon with your brand, making it more memorable.
Keep text to a minimum: Since favicons are tiny, even one word may be hard to read in a browser tab. Most effective favicons contain no text or one or two letters. So, keep text to the bare minimum.
Check that it stands out across browsers: It’s a good idea to test it out in various settings, including dark mode, to make sure it stays visible and recognizable no matter where your users come across it.
Troubleshooting
If your favicon isn’t showing up or not appearing the way they want, don’t worry—there are a few simple troubleshooting steps you can take to fix the issue:
Clear your browser cache: Sometimes, your browser holds onto old data. Clear your cache to ensure you’re seeing the most current version of your site’s favicon.
Check the file size: Make sure your favicon file is the right size and is in the right format. If it's too large or the format isn't supported, it might not display properly.
Wait it out: Sometimes, changes can take a bit of time to update, especially if you’ve just switched to a new domain or are waiting for Google to crawl your favicon. Give it a few days before diving deeper into troubleshooting.
Contact Squarespace support: If you’ve tried everything and your favicon still isn’t appearing, don’t hesitate to reach out to Squarespace support. They can help identify any specific issues with your site and they are generally very helpful!
Want to learn more?
Luckily, Squarespace makes it pretty easy to add or change your website’s favicon, and hopefully, after reading these steps you know exactly how to do it. If you want to learn more about Squarespace, design, blogging, and more on the blog! Here are some of our favorites!
How to write a blog post: Step-by-step
Using Squarespace as a Linktree alternative
How to remove the header and footer from a Squarespace page
How to create a dropdown menu in Squarespace
Choosing the right image size for Squarespace
How to resize images in Squarespace
