What Is a Favicon and Why You Need One: The Full Guide

Creating and managing a website can feel like a never-ending list of tasks. And even more so when it seems there’s always something missing or not quite right. I’ve seen it happen many times. You think you’ve got your website nearly all set up with optimized content, good copy, high-quality images, properly embedded videos… What about your favicon? Wait. What is a favicon?

If you don’t know the answer to that question, don’t worry! I’m here to help and teach you everything you need to know about favicons, starting with a definition and going over their importance and how to create and implement one. Let’s dive in!

 

What Is a Favicon?

See that tiny, white “Yum Yum” icon on the left of the tab you’re reading this article on? That’s our website’s favicon. You might’ve not noticed it, but you see website favicons all the time, not only on browser tabs but also on your search history and your bookmarks. And as of 2019, Google also shows them on mobile SERPs (but not on desktop SERPs yet).

So, a favicon icon looks like a tiny version of the page’s logo, but it can also be an initial or an acronym sometimes. Since it’s so small, websites tend to favor simple designs that contrast with the tab’s background.

If you came here after looking up “favicon meaning” rather than “what is a favicon?”, you’d be glad to know I have the answer for you as well! This word comes from merging the words “favorite” and “icon” back in 1999, when Internet Explorer introduced the concept. Favicon icons were originally created to help users tell their bookmarked pages apart, which at that time were called “Favorites.”

 

Why Are Favicons So Important?

If you’re a tab hoarder like me, you probably know that sometimes you can have so many open simultaneously that the only thing that tells them apart is that little icon on the left. But even if you don’t hoard tabs like a dragon, being able to identify each page just by looking at the favicon icon is what makes them a key feature of your website.

Browsers show a default symbol when a page doesn’t have a website favicon. So, if you have multiple tabs open at once, and most of them don’t have a favicon, chances are you’ll get frustrated trying to differentiate one from the other when you see the same symbols on all of them. 

In addition to facilitating users’ browsing experience, favicons can also function as a branding tool. If you think about it, everyone knows exactly what a white bird over a light blue background means, right? So, having your own customized favicon graphic gives your visitors a similar experience with your brand, as they’ll be able to recognize you at once when they see the favicon image.

 

Are Favicons Important for SEO?

While favicons are not a ranking factor, they can have somewhat of an impact on SEO. Here are some ways in which these icons can improve your search engine optimization:

 

Branding

Since that little favicon image is a business’ visual representation, it helps build brand trust and recognition, as users will immediately associate that icon with your company and remember who you are. SEO is all about reputation and credibility, so website favicons are not something to disregard. Moreover, while Google doesn’t show favicon graphics on desktop searches, they do appear on mobile searches, which helps improve your reliability in this sphere as well.

 

Positive User Experience

We’ve established that having a favicon icon allows users to quickly identify you on their tabs, bookmarks, and search history. But what does this mean for SEO? Well, this positive user experience translates into an increase in the interactions with your page and the time spent on it, both of which are key ranking factors.

 

Bookmarks

Another of the many factors Google takes into account to rank websites is the number of times a page gets bookmarked on Google Chrome. Remember I’ve mentioned before how having a favicon graphic increases your chances of being bookmarked on a browser? Well, here’s where this fact gains particular importance. Just think about it. If you don’t have a favicon image, your chances of being bookmarked decrease, and you’d be missing out on this search ranking signal.

 

How to Make a Great Favicon

So, I’ve answered the question “what is a favicon?” and now you know the importance of having one. Do you want to learn how to make the best favicon graphic for your brand? Let me tell you what to consider!

 

Favicon Format

Although most browsers support various file formats, it’s best to go with a PNG image. This particular favicon format offers excellent resolution, and the image quality won’t decrease when it’s scaled down to fit in the standard favicon dimensions of a 16×16 square. 

PNG files are also highly compatible across browsers and devices, and you don’t need any special tools to create them. The only downside to it is that Internet Explorer doesn’t support it. If you’re looking for an alternative that’s also useful for this browser, then I suggest you go for the Windows ICO favicon format.

 

Favicon Resolution

The technical formalities of the design largely depend on each browser. However, the truth is that most people use Google Chrome, so I will focus on that one. Luckily for us, Google has a really helpful and intuitive page explaining how to follow their guidelines when creating and defining your website favicon. 

Besides file format, an essential requirement is to submit a high-resolution favicon graphic that’s a multiple of 48px: 48x48px, 96x96px, and so on. Then, Google will rescale it to the standard 16x16px resolution for use in search results.

 

Favicon Design

The design begins with the image you’ll use as your website favicon. This might sound rather obvious, but it’s actually not as easy as scaling down your brand’s logo to fit the standard favicon dimensions.

If you have a complex logo that includes words, for example, it can look messy or cluttered when reduced to such a small size. Remember that favicon images have a size of 16×16 pixels, which is why designing a favicon graphic with too much detail or too many colors isn’t a good choice.

I suggest you stick to a simple square icon that represents your brand and doesn’t include any symbols that might be deemed inappropriate by Google. Otherwise, the browser will show a generic icon instead.

If your logo still looks great when scaled down, that’s awesome! If not, here are some ideas to get you started on the creation of a new favicon design:

• Your brand’s initial or acronym. Think of the Netflix or CNN favicon images — instantly recognizable, just by using one or two letters. You could do the same with yours, but make sure to choose the same font and colors as your brand’s logo to keep it cohesive.
• Part of your logo. A complex and wordy logo can be broken down into a smaller one that still represents your brand. For example, LinkedIn’s favicon design only shows the last two letters of its full logo, yet you know precisely which website it belongs to.
• A symbol that represents your brand’s niche. Favicons are icons, so why not take advantage of that? If you look at Book Depository’s favicon, you’ll see that it shows a book, making it pretty hard to miss what they’re all about. In addition, they use the same color as their logo and website. Great branding, don’t you think?

A Few Final Pieces of Advice

Now that we’ve covered the essentials on what favicon images are and how to make your own, let’s go over some helpful tips to get you ready to go:

• If you’re unsure about the design, remember that less is more. Favicons are a visual representation of your brand, so they should reflect that. However, good branding should always avoid overcrowding visual elements. Keep it simple!
• Search your website on desktop and on mobile to check for errors. Once you set up your website favicon, you have to check how well it works on different devices —or if it shows up at all! Special online tools like Realfavicongenerator let you do this easily.
• Test your favicon image on different backgrounds. Different browsers have different colored backgrounds for their tabs. Make sure that your favicon’s colors contrast nicely with them.
• Ensure you’re using the correct file format. As I’ve mentioned before, PNG is the best favicon format choice due to its high-quality resolution. Other file formats, such as GIF or SVG, aren’t compatible with all browsers, so I recommend playing it safe and avoiding them.
• If you’ve recently added your favicon, have patience. Even if you’ve followed all of our tips on how to make a great favicon graphic, search engines might still take a few days to index it. But rest assured, it will get done. In fact, there’s a bot that’s dedicated exclusively to indexing favicon icons!

 

Wrapping Up

You probably came here not knowing the first thing about favicon graphics. But you made it this far, and now you’re fully equipped with the knowledge to create your very own website favicon! From scaled-down logos to acronyms or related symbols, it doesn’t matter which design you choose as long as you follow our recommendations to ensure it can reach its full potential.

And while this topic is not something that’d usually come up in conversation, the next time someone asks “what is a favicon?” you can confidently flex all of your knowledge 🤓.