How to Create a Favicon for your Website and Why you Should [UPDATED 2023]

Mar 28

Did you ever wonder why that bright color red and yellow letter of McDonald’s’ makes us suddenly crave cheeseburgers and fries? Or why does the Starbucks logo can make us smell coffee even by just thinking of it? It’s because their logo branding is so effective that it lingers to their consumers, making them want more. They made sure that we’ll never forget their brand. It goes the same way with our another guest - Favicon!

Wait, what is Favicon? I bet you have lots of browser tabs opened right now. Look at the leftmost part of each tab; in there, you’ll see a tiny logo called a Favicon. A Favicon separates your website and makes it recognizable just by looking on your whole screen. However, a Favicon will serve as your secondary logo since it’s tiny, so your primary logo won’t fit. But, donut worry, we’re here to save your day! Keep reading because I’ll show you how to create and upload one to your Squarespace Website.

FOR YOU NOT TO GET LOST:

The Importance of a Favicon
Tricks to Create a Simple, Yet Powerful Favicon
Uploading your Favicon in Squarespace 7.0
Uploading your Favicon in Squarespace 7.1
Bonus: FAQ
Summary

The Importance of a Favicon

Let me discuss first why you should upload your Favicon immediately.

A Favicon will Brighten your Website
When you create a Squarespace website, the default cube favicon appears on all Squarespace pages.

Not really appealing, right? Reality is, first impressions last, and it's essential to have a good one. The last thing you want your visitors to think is that your website looks unprofessional (yikes!).

2. The Facts show Favicon is tops

Literally, they’re on top. As i mentioned in my previous blog post “3 Website Footer Tricks That Can Help Your Business Grow”, branding is a must in every business. Not only will Favicon make your website visually appealing, but it will also improve your authenticity.

3. Where can you see Favicon?

Not only you’ll see favicons on tabs, but they also appear on other parts of the internet.

History Drop down menu
Browser History
Search Bar Recommendation

This shows that they’re really that important because they are literally everywhere.

4. Increase recognizability

I bet you did not expect that this tiny favicon had an impact on your visitors behaviour. Favicons will save users time by quickly recognizing a website from bookmarks, history, and other locations. It makes life easy for the typical user

PRO TIP: Did you know that tweaking your website will allow you to use Pinterest-rich pins? Yay! A great way to drive up more traffic on your website!

FOLLOW THESE TRICKS TO CREATE A SIMPLE, YET POWERFUL FAVICON

1. Size Matters

Ensure your Favicon image file doesn't exceed 100 KB.

2. Resolution Rules

Favicon images sized between 100x100 and 300x300 pixels perform well across all browsers, though they appear as 16x16 pixels. Stick to these measurements, as they're universally supported.

3. File Format

Squarespace recommends saving the Favicon image in .png or .ico format.

4. Design Tips

Your Favicon can be as simple as your brand's initials, just like ours – the letter H, with its color contrast and sophisticated font, exudes an expensive feel. When conceptualizing your Favicon, focus on making it connect with your brand and resonate with your audience. You don't need complex software; Canva, a free tool, works wonders. Canva is a free software that can generate lots of beautiful Favicons (No, not sponsored, they just make the job done, that’s why we really recommend that app).

How to Upload Your Favicon in Squarespace

For version 7.0

Go to Design, then Logo & Title in the Home Menu.
Upload your image or select a file from your computer under Browser Icon (Favicon).
Save once your picture finishes uploading.

For version 7.1

Click Design, then Browser Icon in the Home Menu.
Upload your image or select a file from your computer.
Save.

BONUS: FAQ

While some browsers may allow larger Favicon files, it's advisable to stick to the recommended size of 100 KB to ensure compatibility across all platforms.
Your Favicon is a part of your brand identity, so it's not something you need to change frequently. However, if you undergo a significant rebranding, updating your Favicon to reflect the new brand is a good idea.
Yes, you can change your Favicon at any time. Just follow the steps outlined in this guide to upload the new Favicon to your Squarespace website.

I recommend deleting your browser cache and restarting your browser if your favicon doesn’t appear right away.

And Ta-da! Even though your primary logo and your favicon are different, remember that they’re equally important in playing a role in your brand identity. In the world of website design and branding, every detail matters. A well-crafted Favicon can be the subtle yet powerful touch that leaves a lasting impression on your visitors. Don't underestimate its impact – follow our guide to create and upload your Favicon today. It's a small step that can make a big difference in how your website is perceived. So, get started and let your Favicon shine!

Bonus content!

Look at your mesmerizing favicon and give yourself a tap in your back. Here’s a friendly reminder that, yes, business is significant. Still, the connection you’ll make with your audience (they can be your friends too!) is something money can’t buy. That’s why you must give your best in every small or big detail of your website. In that way, your audience will know that you’re sincere and serious with everything that you do. Everything that is made by heart will radiate love and kindness to other people.

Become everyone’s favorite by adding your Favicon today!

If you liked this post, Pin it to Pinterest!