Customizing The Favicon on Your Squarespace Site (+ Design Tips & Troubleshooting Problems
Sign up for a free Squarespace trial here! #afflink
A favicon might be the first thing I notice about a website.
If it’s a Squarespace site and the little gray cube is still showing, I immediately judge the site. Shallow, yes, but I’m just being honest.
To me, that simple thing says: this website was not professionally designed.
Creating your own favicon doesn’t have to be complicated. But there are a few details to keep in mind when designing a favicon for a website.
In this article, I’ll talk about that in addition answering some common questions about favicons.
All about Squarespace Favicons
What even is a favicon?
… you might be asking. To begin, let’s first get clear about what I mean by favicon. As far as pronunciation goes- I’ve never said this word out loud, but in my head I pronounce it fave-icon, so let’s go with that.
A favicon is the little icon that represents a website in the browser tab. So look up there above your address bar (where it says tiffany-davidson.com/yadda yadda), where you’ll see the webpages you currently have open. You might have several tabs open. Each of those tabs will have their own icon. Some might be standard or even hardly visible while others are neat and creative. Mine is a red teapot, as I’m sure you’ve noticed. Why? I’m not sure other than I drink lots of tea and my website features red in its palette. Something had to go there; why not a teapot? :)
How do I create a favicon?
You can create a custom favicon to distinguish your site in browser tabs. It’s very easy to DIY.
Login to Canva. If you don’t have a Canva account yet, it’s probably time to get one assuming you … do things… online.
In the top right corner choose Create A Design.
Select Custom Size from the dropdown menu
Input 300 width and 300 height (make sure px is selected) then click Create New Design
A new window will open with a blank canvas (the white square)
Now you simply need to create a favicon to represent your site. I recommend not using text because it’s so tiny up there that no one will be able to see it, unless it’s one single letter. For example, take a look at Canva’s own favicon they use, it’s a C with a blue background. Text works in this case because they’ve designed it in a way that it’s still easy to distinguish. But writing out your site name is probably not a good idea. It’s better, in my opinion, to have some kind of symbol. It can even be a yellow circle. A red circle filled in. A red teapot. A purple cloud. If you’re a woodworker, maybe a crisp white hammer!
Don’t despair- Canva has these graphics available for your use! From the right-side menu, click on Elements. Then in the Elements search bar, start looking for graphics you might want to use. You can enter handshake, or hammer, or circle, or sunshine, car, etc. etc. Pick something fitting. Or don’t. It’s up to you.Tinker with the design— once you’ve selected a graphic, or graphics, you want to use as your favicon be sure you’ve made it (the added element or elements) large enough so it takes up most of the white square you’re working on. You can adjust colors and sizes very easily- it’s intuitive, so I won’t explain that here.
When you’re happy with the favicon design, click Download in the top right corner, and then ***this is important*** be sure to choose PNG as your file type and Transparent Background. Then Download. Otherwise your favicon will show the square background and it won’t look good.
Ta-da! You made your own favicon! Now let’s upload it to your Squarespace site.
How to add a favicon to Squarespace
Adding a Favicon to Squarespace version 7.0:
Login to your Squarespace site
Click Design
Click Logo & Title
Scroll down to Browser Icon (Favicon) and click Upload!
Click Save
Adding a favicon to Squarespace version 7.1:
Login to your Squarespace site
Click Design
Click Browser Icon
Click Add a Favicon
Upload your favicon
Click Save
See? That was easy enough.
But, wait…
Is your Squarespace Favicon Not Showing?
If you’ve done all of the above steps but your favicon isn’t showing in your browser tab, you probably just need to refresh.
If that doesn’t work, then close the window (be sure changes are saved) and reopen it altogether.
If it’s still not showing, you might try clearing your browser cache.
Your new favicon is probably showing now, but if not, reach out to Squarespace chat support and they’ll help you sort it out.
I hope this information was helpful for you. Feel free to leave a comment below with any questions and I’ll try to help.
Thanks for stopping by and I’ll talk with you again soon,
x
Tiffany
Welcome!
Hey there! I’m Tiffany ~ a Squarespace Web Designer & SEO Expert. I design beautiful & professional websites that rank well on Google, & I teach courses on becoming a Squarespace SEO Expert, Monetizing Squarespace, and Starting Your Own Squarespace Design Business!
Feel free to contact me at: tiffany@tiffany-davidson.com
Sign up for a free Squarespace trial here! #afflink
My Courses:
