Let's face it.

Creating a website is a very intensive and sometimes tedious task. Of course, it is extremely rewarding when finished, but it still can be quite a struggle for even the most expert programmers.

When building websites, landing pages almost always get a big chunk of attention from designers and owners alike. More often than not, that little icon on your web browser representing your website gets ignored and sometimes even forgotten.

Although considered part of the finishing touches, these small pixels can greatly affect the user experience of your website.

What are Favicons?

Favicons are the small images that can be seen in the tabs right above the address bar (depending on which browser you use). They help us visually identify open websites.

Apart from the tabs on our browsers, favicons can also be found in bookmarked pages, browser history, and SERPs (or Search Engine Result Pages).

A Short History of Favicons

Before the time Google Chrome took over the market, Internet Explorer was the rave. At the time, when you want to save a website to view later (what we now call bookmarking), you'll have to add it to your favorites.

Looking back to what seems to be millenniums ago, the term favorite [website] icon took on and merged to what we know now as the favicon.

The icons of the websites on our favorite pages are evolved to what we know as favicons.

By the way, it can be pronounced any way you like. Some say fa-vee-con, while some use fav-eye-con. Some play it safe by saying website icon. Well, as long as your website has one, you're good to go.

Does it Affect Your SEO Rankings?

Yes.

But not directly. Pheew!

Still, favicons (or the lack thereof) can affect how users interact with your website. And user behavior is one of the areas search engines take a look at when ranking search results.

The thing is, when you have a perfectly working favicon, no one seems to care. When your website lacks one, everybody will suddenly bat an eye and think twice about clicking on your website.

Here are some of the user behavior metrics search engine crawlers consider when ranking websites:

  1. Click-Through Rate (CTR) - the number of people who clicked on a link vs. the ones who only saw it.
  2. Time on Page – the amount of time a user spends in a website interacting with its content and not merely leaving it idly open.
  3. Bounce Rate – the percentage of visitors bouncing out or leaving the website without checking the other pages on your website.

Websites without favicons look like they are either incomplete or under repair. Such websites usually take forever to load and sometimes turn out to be a waste of time.

Despite their minuscule sizes (they can be as little as 16x16 pixels!), Favicons carry a big responsibility in making sure your website looks professional and worthy of attention.

What Would Make a Good Favicon?

Let's talk about three key criteria that would make your favicon an actual favorite icon.

1. Scalability

An effective favicon must be recognizable in any size. Remember that you are designing an icon as small as two grains of rice. As mentioned earlier, favicons started off as small as 16x16 pixels. That was in the early 2000s. Now, computer screens are more capable of showing detail than ever before.

Because of this, PNG files are usually what designers opt for.

Your favicon should not be distorted when stretched (with proportions kept). Favicons are also commonly used as app icons for both Android smartphones and Apple iPhones. Keep in mind that it should still look great with rounded edges.

2. Color

Some favicons are more effective than others because of their colors. Of course, it's best to stick with your brand hues, but favicons are flexible to revisions. Since it's designed to be very small, you should make one that pops out.

Knowing when to use a solid background and a transparent one is also needed, especially now that most, if not all, web browsers have the dark mode option.

3. Brand Consistency

In most cases, companies and websites use their logos as favicons—which are very effective. But if your logo is not circular or square, you can always choose to stylize other elements of your brand to use as the icon.

A great example we can look at is The New York Times. Their official logo is the classic text block that cannot be pinched into a tiny image. Instead, they used the old English letter T from their logo.

Perhaps you are an eCommerce merchant. You can make a stylized version of your main product as your website icon. If it is a portfolio website or a personal blog, you can use your capitals as your favicon.

Favicon Technical Requirements

So, what size should your favicon be?

Google recommends the highest possible resolution, which is 192x192, to get more clicks.

Different web browsers also differ in their preferred file types. The extension .ico was the original file type for these icons. Now, .jpeg and .png are the most widely used file types because they are supported by almost all browsers.

Because of PNG's transparency feature and great scalability, we recommend you use it for your favicon.

If you enjoyed this read, we have a lot more you will like!

Sign up in our mailing list and be notified when we upload blogs you will find value from!