What is a Favicon? And How to Add One to Your Squarespace Website

Psst! We’re a Squarespace Circle member and affiliate, and genuinely think it’s the best web platform out there. Click here and use the code STATION10 for 10% off your first year.

In the world of IT and web design, tech savvy people may recognize the word “favicon” and immediately know what it means. However, most people have never heard the word before and have no idea what it is. Don’t worry - we’ve got you covered.

What is a Favicon?

A “favicon” is an icon that is associated with a specific URL often displayed in a browser’s address bar or next to the site name in a bookmark list. If you were to open your browser of choice right now and type in a random website, the little icon that is oftentimes to the left of the text on the tab is a favicon. Favicons can be found in a variety of different places in addition to being seen in the address bar or next to the site name in a bookmark list, such as when someone opens their search history, next to toolbar apps, and in search bar recommendations.

Below are a few examples of favicons for some of our most frequently used websites:

At first glance, it might not seem like a big deal. However, favicons are more useful than you may think! A favicon’s main purpose is to help users find your website when they have multiple tabs open, in addition to helping users recognize the visibility of your brand. They can be seen in more ways than just providing visibility, such as also providing validity and a certain level of legitimacy. 

How to Add a Favicon to Your Website

Step 1. Visit the Home menu of your website and select Design

  • If using Squarespace 7.0, you will find the Browser Icon (Favicon) option under Logo & Title.

  • If using Squarespace 7.1, you will click Browser Icon under the Design options.

Step 2. Select + and then either upload your icon via Upload File or Select From Library. If you already have an icon uploaded for your Favicon, you will select Replace and then upload your new file.

Simple, right?!

Important Notes:

When designing your website favicon, make sure of a few things - size, format, design, and connection with your brand.

  • Size - It is recommended that you make sure that your favicon is no bigger than 300px x 300px (it will actually be displayed at 16px x 16px, but your image can be up to 300px).

  • Format - Your favicon can be formatted as .ico or .png. PNG is the most user-friendly and doesn’t require any special tools to create, but please note that .png isn’t supported by Internet Explorer.

  • Design - Don’t go overboard! Since the file is so small, you don’t want it to look cluttered or messy. 

  • Brand Consistency - Remember to include common design elements, colors, and an overarching connection to your brand identity

Again, this seems so basic, but we often run into websites that still show the little generic cube used on Squarespace websites that haven’t added a favicon. It is simple, takes less than five minutes and will make your website look even better!

You might also like…
Previous
Previous

How to Make a Split Navigation in Squarespace 7.1

Next
Next

How to Use Squarespace's New Editing System - Fluid Engine