How to Add a Favicon to Your Squarespace Website
When I visit different websites, I always check their favicon image. The favicon image (also know as a browser icon) is the small square located on the left side of an open tab in your browser. Some of them catch my eye while others don’t. Your site visitors will notice if you take the time to create your favicon with compelling colors and simple graphics. It is a small but important detail for your visual brand.
What is a favicon?
A favicon is a small icon that helps to identify your site and brand. The icon helps the visitor easily return to your site when they have several tabs open at once or if they are searching through their browser history. Favicons are typically located on the left side of a tab.
You may wonder why not just use a small version of your logo? You can use your logo as long as it's simple and only uses one-to-three characters, however many logos become difficult to recognize when their sizes are significantly reduced. For this reason, it may be better to consider creating one that best represents your brand in its miniature form.
Why do you need a Favicon?
Easy and quick identification
A favicon is a small touch that you can do to improve your end user’s experience. It’s subtle and they may not be conscious of it, but it’s a helpful feature that will allow your visitors to return to your site at a glance when they view all of their open tabs. It also helps to reinforce your brand’s professional image as there are still many sites that don’t bother with small details like creating a favicon.
Establish credibility
While your custom-designed website is bound to draw visitors in, you still have to find ways to entice them to stay on your site. You may have heard of the phrase, “sticky websites”. Sticky websites are sites where users want to linger. This is the Holy Grail of digital marketing. The longer your visitors stay, the more likely they are to trust you and engage with you.
One of the ways to keep visitors browsing your site is to show them that you are a credible, professional business, and that impression has to come across quickly. People don’t want to waste their time on a sketchy-looking website.
Taking the time to create a custom favicon is one way to help establish your credibility. When your business uses a custom favicon that perfectly reflects your brand image, it shows that you paid attention to even the smallest of details on your site. Many businesses make the mistake of leaving the default favicon that came with their theme. This is a missed opportunity to establish credibility for your brand.
Your clients will appreciate that you took that extra step. After all, if you put that kind of care and effort into one of the smallest features on your site, imagine how you care for your customers.
Brand awareness
Logos provide us with a strong visual representation of your company. It serves as a critical visual link between your business and the world. Your favicon, whether it’s created from a part of your logo or is an entirely new design, serves as a small version of your logo. It helps your site visitors remember your brand.
How to create a good Favicon
Keep it simple
When creating a favicon there are a few helpful guidelines to keep in mind. Don’t use your favicon to try to push sales. That means resisting the urge to add tags or announcements such as price tags or adding the word ‘new’ to your favicon. In all likelihood, your site visitor won’t be able to read any text you add to your favicon.
In addition, don’t use photos. Photos will frustrate and confuse your site visitor as they squint to try to figure out what’s in the picture or they might leave the site altogether.
Use your brand logo or symbol
Whenever possible try to use your logo or a recognizable part of it as your favicon. This will help users find your business as they scan down their list of bookmarks or the open tabs on their screens. They are in essence guideposts that you intentionally construct for them.
Here is a list of Favicon generators that you may want to use:
https://www.favicongenerator.com/
http://www.chami.com/html-kit/services/favicon/
My brand design packages also include a custom favicon image. If you want to create a professional-looking favicon to match your visual brand elements, please contact me for your complimentary design session.
What is a perfect file size for a favicon image?
A favicon image displays at 16px x 16px but you need to have a favicon size between 100px x 100 px and 300px and 300 px. A favicon image file can’t exceed 100KB.
What file formats do you use for a favicon?
I suggest you save a favicon image in .png or .ico file format.
Here are best practices for creating your favicon image.
How to add a Favicon to Squarespace
1. In the Home Menu, click Design, then click Logo & Title. ( Home Menu > Design > Logo&Title )
How-to-add-favicon1.jpg
How-to-add-favicon1.jpg
How-to-add-favicon.jpg
How-to-add-favicon.jpg
2. Scroll down to Browser Icon (Favicon) and drag your image into the image uploader, or click the uploader to select a file from your computer.
How-to-add-favicon2.jpg
How-to-add-favicon2.jpg
3. After your image uploads, click Save.
What if your favicon isn’t showing up in Google Chrome?
I had this problem before. You may be having the same issue. If your favicon doesn’t update right away, you may want to clear your browser cache and restart your browser.
Thank you for reading! I hope you have found this article helpful. Please leave a comment with a link to your site so readers and I can pop in and see your unique favicon.