How do I upload a favicon image to my Squarespace website?
What is a favicon?
A favicon is the small icon or logo that is used to give brand identity to your website. The most common place you’ll see them is on a website tab (as in image opposite), but they’ll also be visible in your saved bookmarks, search history and browser history. In short they help the visitors locate your page - and there’s nothing better than making things easy for your audience!
This isn’t a compulsory website requirement, but those without really stand out as the Squarespace default is a bold, boring black box that in my opinion shouts out “unfinished website”!
Your favicon can be a scaled down version of your logo, small image or icon - just remember it’s very small, so choose something that’s clear and bold.
It’s super quick and easy to add a favicon to your Squarespace website, just follow these steps!
Upload a favicon to your website.
On your left-hand menu panel click Settings (at the bottom), then choose Website and you will see Favicon option on the main screen.
Next you can either drag your image file into the Add a favicon box, or click on the upwards arrow and it will open your finder folder to upload your file.
The file needs to be either PNG or ICO format, so bare this in mind when saving your file. It’s also worth mentioning that PNG allows you to save with a transparent background
Adjust the size of your favicon
The favicon display size is 16 x 16px, however Squarespace recommends sizing yours to between 100 x 100px and 300 x 300px. You will also need to make sure the file size is under 100kb when downloaded.
I would recommend using Canva* to create your favicon if you don’t have, or use programs such as Adobe Photoshop. Canva has a free version (which I would completely recommend signing up to if you haven’t already!). Once in Canva use a blank Instagram post template as your base (as this is already square), resize the template to the size of your choice (between 100 x 100px and 300 x 300px) by clicking resize on the top left menu bar. Input your dimensions here (making sure it’s set to px on the drop down box) and then click resize.
Finally, download your favicon as a PNG file and you’re good to go! Follow the steps you’ve just read above, and BOOM your website now has a favicon! You may need to refresh the page for it to show.
Need help with your Squarespace website?
If you need help adding a favicon to your website, or have other troublesome areas why not book me to update your website for you. Check out Done in a Day (or Half) for more details.
*This is an affiliate link. When you click on an affiliate link and make a purchase, I receive a small commission at no cost to you.
