What is a favicon?

A favicon is essentially an icon or symbol of a website that is displayed in the left part before the page title. You can also see this icon in search engine results pages of Google, as well as in browser tabs. A favicon serves as a mini logo for a website.

Что такое фавикон

Today, we decided to explore what a favicon is, why it is needed, where it can be seen, and in which formats it should be created.

Favicon is not just a small image; it is part of your branding.

What is a Favicon and where is it used?

Favicon, short for “favorites icon,” is a symbol for a website. It is often the company’s logo, the first letter of the name, or any other image that represents or is associated with the business.

Where can you see a favicon?

  1. On open browser tabs, to the left of the site name. If your website doesn’t have a favicon, it will display a default icon, usually a black and white planet.
пример стандартного фавикона

2. In your browser’s browsing history..

фавиконы в истории браузера

фавикон на закладках
On the bookmarks toolbar, where you save pages of interest.

фавиконы в избранном
5. Similarly, in the search results of Google. Favicon support for mobile versions appeared in the spring of 2019, while for the computer version, it was introduced almost a year later, in early 2020.

A brief technical instruction for favicons:

To ensure that your favicon is displayed correctly on all devices, it is important to adhere to certain technical parameters.

Favicon format:

Today, almost all browsers recognize icons in the PNG format (transparent images) well, and some also support GIF, JPEG, and SVG. An exception is the Internet Explorer 10 browser and its earlier versions, which only support ICO files (the most well-known but outdated favicon format).

PNG format is the most convenient to use to maintain high-quality icons regardless of the browser. PNG is supported by practically all modern browsers without any issues.

Favicons in SVG, GIF, and JPEG formats face difficulties due to the lack of wide support from browsers. However, SVG icons scale well without loss of quality.

Favicon size:

The standard size for a favicon is 16×16 pixels. It is recommended to check how your icon appears in such a small resolution.

However, there are other parameter variations for favicons depending on the device and operating system:

размеры фавиконов

Recently, Google sent emails to some webmasters recommending increasing the resolution of favicons to 192×192 pixels. It looks like this:

Google believes that higher-quality favicons can increase the number of clicks on new tabs in Chrome and on the Android home page by up to two times.

Some tips for creating a favicon:

  • It is better to use a square icon for your website.
  • Avoid using another company’s favicon or an image of inappropriate nature (e.g., swastika), as search engines will display a black and white planet in such cases.
  • Ensure that your favicon is accessible for search engine crawlers.

Why every website needs a favicon:

Favicons help web resources stand out among countless other sites and make them more attractive and professional in the eyes of visitors. Although a favicon may seem like a small detail, it can influence the perception of your website and brand, their recognition, and even the number of clicks from search results and, consequently, product or service sales. Therefore, it is necessary for every website.

We can help you create your favicon if needed.

Let's get to work