Andrew Shipp
Jan 31, 2020 | 12 min read

The favicon is a small square 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.

What favicons look like in the browser address bar

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 website you need much easier.

Example of multiple favicons

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.

Example of website without a favicon

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

Example of favicons in Google browser history

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

Example of bookmarked favicons

4. …and under ‘Other Bookmarks’ as well.

Favicons under Other Bookmarks

5. Since May 2019, Google has been using favicons in the mobile SERP, plus the desktop SERP also got a new look at the start of 2020.

Example of favicons in the search results

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.

Meeting technical requirements

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. The only exception here being earlier versions of Internet Explorer, such as 10 and lower—they are only compatible with ICO files.

Generally, ICO favicons are now considered a bit 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.

Screenshot of Can I use PNG

Favicon size

The classic favicon is only 16х16 pixels in size. Some older browsers still use tiny squares, but if you want your favicon to look good on modern devices, you’ll have to also create favicon variations with a higher resolution. Depending on the OS type, you may need to use the following sizes:

Desktop, Android, iPhone favicon dimensions

So, what favicon size is preferable? Google recommends going with the largest possible resolution of 192×192. Recently, some webmasters received a letter from Google that encouraged them to use high-resolution favicons to get more clicks. At the moment, Google simply stretches existing low-resolution favicons when a bigger size is required—like for the Android home screen. As a result, all of the images look blurry and take away from the user experience.

Google sends letter on favicons

So, if you don’t want to lose out on clicks, consider “upgrading” your site’s favicon. And here are some general guidelines 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.

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" sizes="<16>X<16>">

<link rel="icon" sizes="<16>X<16>,<32>X<32>">
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.

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, Katvin or favicon.cc) and then download it from there in a suitable format.

Screenshot of Favicon CC

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 Findicons with over 500 thousand options to choose from, and IconJ with more than 18 thousand favicons.

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 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 the favicon clear and unique?
  4. 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.

Favicon notification in SE Ranking Website Audit

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.

Share article
Post Views: 400
4 comments
  1. nice to catch up on the trends every once in a while. favicon.cc has been my favourite since a very long time.

    of course, my blog’s favicon is done through that. It’s very easy and gives you a nice feeling when you have your own creation up on your blog 🙂

    1. Hey there, Gagan! Favicons aren’t actually used in content. You’ll just see them in the tabs or the search results.

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles
SEO Insights
Packing a marketing toolkit to efficiently promote your website
May 25, 2020 31 min read

With plenty of ways to promote your website in the modern digital landscape, the question is which techniques can help you get quick results and then maintain visibility online. In this post, you'll find two promotion plans to pick from depending on your goals and available resources. Every suggested strategy comes with actionable tips, so you'll surely know where to start.

Sylvia Shelby
SEO Insights
Moving to HTTPS in 5 steps
May 21, 2020 17 min read

HTTPS is a secure transfer protocol that every website needs to protect users' data. Learn why you should switch to HTTPS with no further delay, why you need an SSL certificate, and where to get one. We'll also share some insights on setting up your website and Google Search Console after moving to HTTPS that will help you keep your rankings and traffic.

Sylvia Shelby
SEO Insights
Google Ads and other data used in SE Ranking
May 14, 2020 17 min read

At SE Ranking, we use several Google Ads metrics along with our own algorithms and indexes to provide our customers with all the data they could possibly need to put together the perfect keyword campaign for both organic and paid search. Read all about it here!

Andrew Shipp