How to Add or Change a Favicon (Browser Icon) on Squarespace 7.1
The biggest mistake I see is people not updating their browser icon (favicon) on Squarespace! It boggles my mind because it’s such an essential factor for your branding and recognition.
Table of Contents Show
How to make a Favicon?
There are a few ways to make a browser Icon.
Here are a few free and paid ways to make or buy a favicon.Favicon.io
Favicon.io is a free tool that will create all sorts of sizes and shapes for your browser icon. You can upload an existing image, use text, or an emoji favicon. If you don’t know what you’re doing, I highly recommend using Favicon.io and a simple text version so you can upload it in a snap.
Canva
You can search for a Favicon template on Canva. Their example in the template is pretty horrible. So think of that as what NOT to do. But they have the sizing right. Feel free to upload the image, a letter, or an emoji!
Go to Canva (aff link)
Adobe Illustrator
How to Make a Squarespace Favicon with Adobe Illustrator
If you want to get fancy with it and create a custom design, Adobe Illustrator is your best bet. Make sure to follow the best practice tips and design your heart away!
Fiverr
Or you can just skip all of this and hire someone from Fiverr to do it for you. It’s crucial to give clear direction when you’re hiring someone, so if you’re not sure of your brand or what to use, check out other favicons until you feel inspired and see how it can dictate your own. Then go ahead and brief your Fiverr person!
Go to Fiverr (aff link)
Other Alternatives
You can buy pre-made Favicons from Creative Market (aff) or Etsy
What’s the Squarespace Favicon Size dimensions?
The best sizes for favicon are usually between 100px x 100px and 300px x 300px, but they will display at 16x16 on most devices or browsers.
How to add or change a Favicon on Squarespace?
Once you have the .ico or .png version of your browser icon saved to your desktop, it’s time to add it to your Squarespace website.
Squarespace 7.1
From the Home Menu > Design > Browser Icon.
Add the images using two methods:
Now drag your image into the uploader or
Click the uploader to choose a file from your computer
Once your image uploads, click Save
Squarespace 7.0.
In the Home Menu > Design > Logo & Title.
Scroll down to Browser Icon (Favicon)
Add the images using two methods:
Now drag your image into the uploader or
Click the uploader to choose a file from your computer
After your image uploads, click Save.
Now refresh your site and you will see your new Favicon! Badda-bing-Badda-boom!
Squarespace Favicon Not Showing / Updating
If your favicon doesn't update or show immediately, it’s a super quick fix! Clear your browser’s cache, quit the browser, and open it again. Your browser icon should display in all of it’s glory! Go ahead and try it yourself!
Now you have a non-ugly-Squarespace browser icon, and you have a beautifully branded favicon that people will remember!
Are You On Pinterest?
If you enjoyed this post please share it, thanks!
