What is a Favicon?

Favicons are tiny icons that act like visual bookmarks. They take up only a few pixels on a screen, but serve an important role for your brand. 

A favicon helps people instantly recognize your site, whether in a browser tab, bookmark list, or search results. They’re small, but make a big impression.

We’ll cover the basics of favicons, including where they appear, why they’re important, their relationship to SEO, and what to consider when designing a good favicon.

What is a favicon and where are they used? 

Whenever you have a browser tab open or are browsing your bookmarks, you’ll notice a small icon next to the web page title. That icon is a favicon. A favicon is a small icon that identifies and differentiates your website from others.

A favicon could be your logo, initials, symbol, or any graphic that effectively captures your brand identity. It’s this powerful little image that helps people recognize your brand when they see it. 

Favicons are more than just decoration. If several tabs are open in your browser bar, the favicon helps to differentiate one brand from another. Favicons help us find what we’re looking for faster. 

The term favicon was first coined in 1999. The word itself is a shortened form of “favorite icon.” While favicon is the most common term, you might also hear it called a website icon, tab icon, shortcut icon, or even an app icon. Ultimately, they all refer to the same thing: a small image that represents your website. 

Where favicons appear online

Favicons are extremely useful because they make websites easier to recognize across the internet. You’ll find favicons in these places, among others:

• Browser tabs

• Bookmarks

• Address bars

• Search engine results

• Desktop shortcuts

• Browser history

• Search bars

• Mobile search results

Create a favicon with the free Logo Maker

Why do favicons matter?

First impressions are everything, and your favicon is no exception. It's a small touch that can make a big difference in how your brand is perceived. The favicon may be one of the first brand visuals someone sees for your site and helps to build ongoing brand awareness. 

Without it, something can feel off. It's a visual cue that ties the design of your website together. Every major brand includes a favicon on its website. When favicons aren’t there, users may feel the brand isn’t as trustworthy or professional.

 There are four top reasons to include favicons in the design of your site: branding, professionalism, user experience, and mobile experience.

1. Branding

Favicons are an extension of your brand's identity. Because favicons are often your logo, initials, or a symbol associated with you and what you do, they also serve as a visual representation of your website and its content. 

When users see your favicon, they should instantly associate it with your brand. This helps to build brand recognition and reinforce your brand identity, maintaining brand consistency across platforms and devices.

2. Professionalism

If you don’t see a favicon, its absence may raise a subconscious red flag for you. How professional is this site? Can it be trusted?

Having a favicon makes a website look more polished. It also makes the site appear more credible. Visitors are more likely to click on, buy from, or interact with a site they feel is trustworthy.

3. User experience

Our browser tabs and bookmarks can quickly become overwhelming. Favicons make it easier for users to identify your website, especially when multiple tabs are open. A favicon also improves the overall user experience and makes your website more accessible. Using a consistent visual cue across all platforms makes your website easily recognizable and encourages visitors to return. As a result, they also improve trust across devices, searchability, and brand recognition for your site. 

4. Mobile experience

Favicons play an important role in the mobile experience by making it easier for users to find and access your website on their smartphones and tablets. When you take the time to add a favicon to your website, you improve the mobile experience for your audiences. That ease of use can make them more likely to visit and stay on your site.

How favicons impact SEO

Favicons play a significant role in SEO. While they might not directly influence search rankings, they can have indirect benefits. By making your site easily identifiable and accessible, favicons encourage visitors to explore, revisit, and ultimately stay longer. This improved user engagement contributes to a stronger online presence and better search optimization.

When users consistently see your favicon across different platforms, it reinforces your brand and makes it more memorable. This contributes to a better user experience, which leads to:

• Lower bounce rates

• Higher engagement

• Improved recognizability

• More returning visitors

• Better click-through rates

• Enhanced mobile experience

These positive user signals tell search engines that your site is valuable and user-friendly. Those are factors that can improve its visibility and ranking.

How to get a favicon

Now that you have a good idea of what a favicon is and how it helps your website, let’s get into how to add one to your website.

There are two main ways to get a favicon:

1. Create your own. With enough graphic design skills or the right tool, you can create a favicon that aligns with your site’s branding, looks good, and becomes recognizable.

2. Hire a designer. A graphic designer skilled in logo or icon design can create a favicon for you that matches your brand.

 In either case, it’s helpful to start with an idea of what represents your brand, which will help you decide what your favicon should look like. It could be helpful to have brand colors, shapes or objects that are related to what you do, or a logo at the ready. 

Learn how to add a favicon to a Squarespace site

A few design considerations

Whether you design your own or hire someone to make one for you, keep these best practices for design in mind.

• Simplicity: You don’t have a lot of space to work with, so keep the icon design simple. Extra details may not show up, or they may detract from the overall look.

• Brand consistency: Keep your favicon consistent with your brand. Use brand colors. Include logo elements, or create a simplified version of your business logo.

• Originality: A unique favicon will help you stand out from the competition. Try to avoid a design that looks too similar to a well-known brand or peer.

Focus on creating an easily recognizable favicon that’s clear and easy to identify at small sizes.

Favicon sizes and formatting

There are several standard favicon sizes and formats. Different displays need different favicon sizes, and you’ll need to consider how to format your images for each.

 Here are some standard pixel sizes and where they might apply:

• 16x16: For browser tabs or bookmarked lists

• 32x32: For taskbar shortcuts

• 96x96: For desktop shortcuts

Test your favicon at different sizes to make sure they look right everywhere.

File formats for favicons: ICO and PNG

A common favicon file type is ICO. This format offers several advantages. As the original and mostly widely used format, it’s a well-supported, universal file type. You can include several small images within the same file—great for scaling and optimizing small icons.

PNG is also a great option, one that’s just as effective as ICO and very user-friendly. Choose the one you’re more comfortable with, or the one your platform recommends.

Tips for uploading your favicon

Before you finalize your favicon design, consider these essential tips to ensure it looks its best across all platforms.

• Keep it simple. Avoid intricate details that won’t show up and may distract from the basic design.

• Test it out. Look at your favicon at its actual size, in all its different sizes, to make sure it’s legible.

• Use a transparent background. This way, your favicon will look great against different backgrounds and browser colors. 

• Consider different contexts. How will your favicon look on various devices and browsers?

• Upload two versions. On website building platforms like Squarespace, you can upload a favicon for light and dark mode displays.

If you're working with a designer, be sure to share these tips to ensure they create a favicon that effectively represents your brand.