Table of Contents
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!
Table of Contents
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.”
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.
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:
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.
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.
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.
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!
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.
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.
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:
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:
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 🤓.