Why every website needs a favicon and how to get it right

The favicon is a small image that represents a website in web browsers. If you take a look at the address bar of your browser right now, I’m sure you’ll see several favicons including SE Ranking’s one. Typically, favicons feature a logo, the first letter of the company name or simply an image that reflects the specifics of the website it represents.

Favicons help us quickly visually match every browser tab with a certain website. And if you‘re like me and tend to keep dozens of tabs open simultaneously—ultimately being unable to read their names—favicons are your best friends that make finding the web page you need much easier.

While favicons may seem small and insignificant, having one can actually make a huge difference in terms of user experience and online branding. In this post, we’ll figure out where favicons come from, what kinds of favicons are used in modern browsers, and how to create one for your website.

From Internet Explorer to Google’s SERP

Back in 1999, the favicon was introduced in Internet Explorer as a way of helping searchers tell bookmarked web pages apart from others. And since bookmarked pages were (and probably still are) called “Favorites” in Internet Explorer, the words ‘favorite’ and ‘icon’ were blended together to create a new term. 

1. Nowadays, favicons are displayed right above the address bar regardless of whether the website is bookmarked or not. And in the small chance that a website doesn’t have a favicon, the browser will display a generic browser symbol.

2. In addition to the address bar, favicons can also be found in the browser history.

3. Bookmarked pages will also come with a favicon in the Bookmarks bar.

4. Since May 2019, Google has been using favicons in the mobile SERP.

5. In October 2022, Google rolled out “site names” for mobile SERPs. With the new design, Google is able to show the names of websites more prominently.

Favicons attract user attention and boost brand awareness. If users visit a website with a memorable favicon a couple of times, they will then easily distinguish it from others in the future. Think about a famous brand you interact with on a daily basis—like Facebook or Twitter—you should be able to easily picture its favicon with your eyes closed. 

The favicons Facebook and Twitter have look exactly like their respective logos. So, does it mean that all you need for a favicon is to minimize your logo image and upload it onto your website? Let’s dive deep into all the technical details and talk about what it takes to create a favicon.

Technical requirements for creating a favicon

Now, if you want your favicons to show up properly on all sorts of devices—in good quality and with the picture that you have in mind—you need to follow favicon guidelines, standards, best practices, basically, all technical parameters. 

But where do you need to start? Start by choosing the right favicon format and size.

Favicon format

Originally, all favicons were created as ICO files—a format developed by Microsoft to store Windows program icons. The biggest advantage of this format is that it can store images of different sizes in a single file.

In the past, Internet Explorer only supported this file format, but modern day web browsers let you use PNG icons as well with some browsers even supporting GIF, JPEG, and SVG favicons.

Generally, ICO favicons are now considered outdated and most websites today have favicons in the PNG format. The reason for this is image quality: High cross-browser and cross-platform compatibility PNG favicons look a lot better in most modern browsers and devices. 

Favicons in the SVG, GIF, and JPEG file formats are not that great in terms of browser compatibility. However, this may change in the future. The SVG (Scalable Vector Images) format may become the new norm as using it will solve the problem of creating multiple favicons in different sizes to cater to every popular device. So, while only a few browsers currently support SVG favicons, others may very well catch up soon. 

To learn which favicon formats are supported by different browsers, check out the Can I Use website. Here you can see, for example, which browser versions are compatible with PNG and SVG favicons.

Favicon size

The classic favicon size is 16х16 pixels corresponding to 32×32 pixels on high resolution screens. While Google uses 16x16px on their mobile SERPs, its guidelines say not to provide favicons in this size. Instead, Google recommends creating favicons in higher resolution that is a multiple of 48px square. So, your favicon size should be 48x48px, 96x96px, 144x144px, and so on. Meanwhile, SVG files don’t need to have a specific size.

Now, as size attribute was introduced in HTML5, you can as well easily specify several sizes of the same icon. The attribute allows you to set the width and the height of the favicon, and you can also specify several values separated by a space:

<link rel=”icon” href=”favicon.png” sizes=”16×16″ type=”image/png”> (1 size)

<link rel=”icon” href=”favicon.png” sizes=”16×16 32×32″ type=”image/png”> (2 sizes)

Additional guidelines for a favicon

And here are some general guidelines laid out by Google that you should stick to:

• Use a square icon.
• Favicon should represent only your brand and not contain inappropriate symbols (like swastikas) — otherwise Google will not show it and will use the generic favicon symbol instead.
• Favicon file should be accessible to Google crawlers (Google Favicon user agent).

The technical parameters of favicons largely depend on the devices or browsers that scan them. For this reason, there are hundreds of online services out there that can help you take all of the nuances into account and create favicons that are of the right format and size.

UPD: With all these developments, Google recommends you recheck the relevant documentation on favicons to upgrade them according to the latest best practices. On top of that, the search giant also recommends you use icons that are at least 48px, and be sure to follow favicon guidelines.

Turning to the web for help in creating a favicon

If you ever get the idea to simply change the name of your logo file to favicon.ico, forget about it because it doesn’t work like that. You will most likely get plenty of errors when it comes to displaying your favicon in different browsers.

Can this be avoided?

Sure. As a matter of fact, there are several ways of creating a website favicon, such as:

1) Create it in a graphical editor like Photoshop using a special plugin Favicon.ico.

2) Draw it up in special online services (for example, favicon.cc) and then download it from there in a suitable format.

3) Use an existing image of, for example, your logo and upload it to an online favicon generator like Favicon.io, Realfavicongenerator.net, etc.

4) Download ready-made favicons from special databases, such as Flaticon or Findicons with thousands of options to choose from.

Once you download the generated favicon, all that’s left is to add it to your site. 

Decorating your site with a favicon

First, upload your favicon to the root catalog of the site using a file manager such as Filezilla. Then all you have to do is insert the following piece of code into the <head></head> meta tag:

<head>

  ...

  <link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon">

  <link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon">

  ...

</head>

Alright, now that we’ve figured out all of the main technical aspects of favicons, let’s move on to what is considered appropriate in the design of favicons, and what should be completely erased from your memory. 

Simple doesn’t mean worse in favicon design

Before you go running off to write down your next favicon idea, why not take a good look at the search results that come up for your target keywords? What do the favicons that they have look like? 

And as you’ll be doing that, ask yourself these questions:

Does your favicon stand out from the crowd? Perhaps, your rivals sprinkle their favicons with color, and, to oppose that, you could go for a black and white favicon or even something conceptually different instead. 

Can an animated GIF favicon help you be different? Or will it just be a total eyesore for searchers, creating an effect that will (most probably) make it seem as if your website hasn’t finished loading.

Do you clearly understand your favicon when it’s 16×16 pixels? Do your best not to have any small details in your favicon and do not attempt to include every imaginable color in it either.

Is your favicon representative of your niche and website? Sometimes, you can just look at a brand’s favicon and immediately understand the sort of business it’s in. Other times, you can even recognize the exact visual style of the brand and it’s website in the favicon. 

Keep in mind that a great favicon will always be clear, simple and memorable.

Now that you know how to create a beautiful, memorable favicon and add it to your website, it’s time to figure out whether or not it will be correctly displayed in search engines. Let’s go in for a closer look!

Checking your favicon for critical errors

Simply Googling your website on the mobile SERP will allow you to quickly check how your favicon is displayed in search or you can use this link example to only pull up your site’s favicon: 

• http://www.google.com/s2/favicons?domain=mysite.com

There’s also another way of checking how the favicon looks on different devices: Using special online services, such as Realfavicongenerator. 

However, if your favicon doesn’t show up correctly or at all on Google for any reason, start by checking the following things:

1. Is the graphic image located in the resource’s root folder in the ICO, PNG or GIF file format?
2. Is the code leading to the image on the resource’s pages written out correctly?
3. Is a favicon file accessible to search crawlers?

I want to point out that the path to the image has a direct impact on how well the favicon is displayed. If you want to delete or edit your favicon in any way, all you have to do is delete or modify the favicon.ico file (JPEG, GIF, PNG).

Generally speaking, even if you do everything correctly on your part, keep in mind that it does take time for search engines to index favicons. In fact, there’s a whole dedicated bot that does nothing but this. What it actually does is it uploads website icons on its server, so it can take up to several weeks for your graphic image to get indexed.

Why you can’t do without a favicon

Favicons help websites stay afloat in the vast ocean of online resources, plus make them more attractive and professional in the eyes of the visitors.

If you need any help with yours, turn to our Website Audit for help.

Among other things, it can run a full technical check-up for your website that includes finding your favicon.

If you’re sure that you have a favicon, but our Website Audit does not seem to see it, then there’s an indexing problem or the address of the website icon is incorrect. Go over everything again to make sure.

You know how they say that the devil’s in the details? Well, your favicon is a very small detail that can affect the public perception of your site and brand, their recognition and even the volume of traffic it gets from search, so don’t underestimate it. 

To sum up, don’t mess around with your favicon as a good favicon is an integral part of your brand and the technical standard of your website. It’s definitely worth every second that you invest in it.

Andrew Zarudnyi

Andrew is a content marketer, writer, editor, and webinar host at SE Ranking, plus a guest contributor across various marketing media. He is passionate about content, marketing, social media, and SEO best practices and leverages his experience to help companies reach their global audiences more effectively. When he’s not writing about SEO and marketing, he can be found spending time with his cat, enjoying a video game, watching too much soccer or playing the guitar (in that order).