Adding a Favicon to Your Squarespace Website

I’M HERE WITH A VERY IMPORTANT PSA! A dead giveaway that you DIY’d your site….is not having a favicon. You might be asking, “Jodi, what are you talking about? What is a favicon?!” Well, sit back and let me help a friend out!

What is a Favicon?

A favicon (which stands for favorite icon) is the tiny icon before the website page name in your tab. If you’re anything like me, you probably have a feeeeew too many tabs open at once, which actually works for us today. Take a look and check out the favicons on your open tabs. You’ll notice they can be a mixture of elements, but the best practice is to have a legible icon or mark.

This favicon image is a great example of why having multiple logos in your brand’s visual identity is important. It becomes super hard to read if you add your full 3-word logo to that small space. For context, most logos on a website’s header navigation is around 100-200 pixels wide and a favicon is shown at 16 pixels wide. Whoa! If your website doesn’t have one in place, keep reading along to create + add your own.

Are you feeling a little panicked now because you only have one logo? Take a deep breathe and check out my Brand Identity package. Let’s chat about how we can expand on your current logo or build a new logo suite for your business.

How to Create Your Own Favicon

If your current logo suite does not include a favicon, you can design one in Canva in no time.

1. First, create a new design with the custom dimensions of 48px by 48px.

2. Add your icon or brand mark. Keep in mind that people may view this in light or dark mode, so make sure it is legible for both. Squarespace has a feature that allows you to add a favicon for each mode.

3. After you’ve centered and adjusted the size of your icon, save it as a PNG file with a transparent background. This eliminates the awkward white square around your icon.

How to Upload Your Favicon to Your Website

It’s time to add your favicon to your website. Every major website platform has the option to add a favicon, but I will show you how to add it to Squarespace since that’s the fav around Letters and Lines.

1. Log into your website through Squarespace and in your tools panel, select ‘Settings’

2. Under the Website option, select ‘Favicon’

3. Upload the favicon you just built (or previously had). This is where you can use a darker option for light mode and a lighter option for dark mode.

4. Save and refresh your page.

5. Ta-daaaa, you now have a favicon in place for your website!

Another way to help your brand look more trustworthy + professional is through brand consistency.