How to Create and Add a Custom Favicon

8 Dec

What’s a favicon? Why do I need one? All these questions and more will be answered in the next two minutes and thirty-six seconds. Or you can read the transcript below the video.

TL;DR - Just the goods, please!

if you already have a favicon … (if not, watch or read on for instructions)
go to Settings
go to Favicon
click the plus (+) sign to add your image
click Save

Boom! Nailed it. Great job!

Prefer to read it? Here’s the transcript:

How to Create and Add a Custom Favicon in your Squarespace website

Hey, it’s Kessiah with Radiant Websites, back with another quick way to elevate your Squarespace website with a custom favicon. As always, the quick fix first and then I promise we’ll get into the details.

If you’ve already got a favicon ready to go, here’s where you pop it in: In your Squarespace website, go to Settings, Favicon, and click the plus sign to upload your image. It tells you the file format should be a .png and it should be 0.1 mb or less in size. There’s even a place to upload a light and dark version for different colored backgrounds so it’ll show up whether your visitors are viewing in light or dark mode. Pop them in, click Save, and you’re good to go.

Ok, So let’s zoom out —What is a favicon and why do I need to use one? A favicon is *this* tiny little browser icon that shows in the tab when someone’s looking at your website. It’s an easy way to elevate your site with that extra touch so it’s completely branded and super pro. AND if your site visitors are anything like me, they might have eleventy-three tabs open at any given time, and a favicon makes each tab stand out.

As usual, Squarespace has you covered by default with this simple gray square, but everyone who builds a Squarespace site has the same gray square unless they change it, so it’s even cooler when you add your own.

If you don’t have a favicon yet, here’s how you make one. You’ll need a tiny symbol. Ideally it’ll be your logo or part of your logo or branding. Nothing too complex because just a few pixels in size. But it could be a letter or a simple shape.

Hot tip: you could even screen shot your logo, pop it into a background remover, and save your new .png image with a transparent background. I really like this free drag and drop one at remove.bg - you can even fine tune if you need to (but I usually don’t need to).

Once you have this image, you’ll pop it into … a favicon generator! My favorite is favicomatic.com. I’ve been using them for years, they’re free, instantaneous, and they always look great. You just drag and drop your new .png image into the favicon generator, save the zip file, and when you open it up you’ll see these three versions. Squarespace asks for a .png, so I use the slightly larger version at 32x32. If you want you can give it a name like “my-site-favicon” and that’s the file you’ll upload in the back end of your site.

How do I get there again? I’m so glad you asked. Here’s how you do it: In your Squarespace website, go to Settings, Favicon, and click the plus sign to upload your image, pop it in, click Save, and you’re all set. Super pro.

I hope this helps! Let me know what other questions you might have and have a blast designing your Squarespace website.

Meet Kessiah

I’m Kessiah, Squarespace website designer for happy visionaries of all industries. I work with businesses and brands of all shapes and sizes, including startups, corporations, agencies, nonprofits, and solopreneurs. If you’ve got a project you’d like to discuss, you can email me at hello@kessiah.com, leave me a note here, or book in for a free 15 minute consultation call here to tell me all about what you have in mind.