An icon that appears before the title of a page in a browser tab is called a favicon. The logo, initials of the brand name, or a relevant visual to the resource’s theme are typical components of the image.

An image that represents a website is called a favicon. Such a picture is useful for navigating through many open tabs to locate the one you want. The pictures were referred to as Translated as “icon for favorites,” the abbreviation “favicon” is derived from the full word FAVoritesICON.

At the moment, the favicon can be seen in many places, including tabs, the bookmarks bar, the browser’s history and bookmarks, and search engine results on desktop and mobile.

No matter where it appears, the favicon serves to both identify and recall the website.

Who needs a favicon anyway?

A favicon is a little graphic that can be used to identify a specific brand or website in a web browser. In the absence of an icon on the tab, a standard placeholder icon (or a black-and-white globe, depending on the browser) will be shown, rendering the site unrecognizable. You probably have ten, fifteen, or even twenty tabs active in your browser right now. The title text is completely obscured by all the open sites; the only way to identify the required site is by looking at the image.

When adding a website to a mobile device’s home screen, favicons are also required. When someone creates a new tab specifically for easy access on the home screen, that’s one example. Users will always remember the site’s identity and be able to spot it amid competing apps with the help of the favicon.

An opportunity to increase brand recognition and memorability exists in a favicon. The picture gets people to notice, remember, and associate the brand. Users will remember the brand later on when they encounter the same symbol in other places, such as bookmarks, ads, or search results.

So, a favicon meaning for the website

Brand recognition

A favicon serves as the distinctive identifier for your site. If it is unique, striking, and clear, this shortcut will ensure that users recall your web resource when browsing through various similar projects. No matter what your potential visitor is engaged in—whether they are browsing history, searching for information, or viewing a list of bookmarks—a favicon will assist in swiftly identifying the desired site. It is a well-known fact that individuals tend to perceive and retain graphic images more effectively than written text.

Confidence

When a website lacks a favicon, the web browser shows a default symbol, such as a globe icon or a WordPress logo, on the tab, or it may display nothing at all. Picture this: a user has accessed both your project and a rival’s online platform. Your site lacks a favicon, while the competitor has offered a distinctive shortcut. From the client’s perspective, your competitor’s site appears to be more expertly crafted, leading to a greater sense of trust in it. Negligence will come at a high cost: when it comes to comparisons, audiences typically favor projects that include favicons. Consider which website you would visit first when searching for a costume rental for a child.

Visitors coming back

A visitor appreciated your site and decided to bookmark it for a future visit. Alternatively, they may not have added the project, and now they are reviewing their history to locate a link to it. It has been established that individuals respond more positively to visual content compared to text content. They can actually recall the title of the page. However, they will immediately notice a clear image. This indicates that they will come back once more without any issues. A resource lacking a shortcut or featuring a plain favicon may be unintentionally removed from bookmarks and history.

Conserving users’ time

This benefit arises from the prior point: the user invests significantly less time locating your site page due to a distinctive favicon. This simplifies your customers’ lives, leading to gratitude and transforming them into brand advocates.

Influence on SEO

Do you believe that including a favicon on your site pages offers no benefits for promotion? You are correct, but only to some extent. Icons do not directly influence website promotion. However, they remain beneficial for SEO, albeit in an indirect manner.

The focus is on user convenience. When search engines showcase favicons, websites with shortcuts will have an advantage in organic search results. A distinct favicon enables quicker and easier site identification: while it may seem minor, it can influence the increase in click-through rates, subsequently impacting the resource’s search ranking.

The best ways to plan a favicon’s layout

Clarity, simplicity, and memorability are the three primary qualities of an excellent favicon. Make sure the picture is crystal clear and easy to identify.
We suggest answering these questions to get a sense of the final icon’s quality:

In comparison to its rivals, does the favicon grab attention? Look at the favicons and search engine results for your important inquiries. Observe the form, hue, and subject matter of the rivals’ pictures. You must devise a plan that is completely novel.
Is the favicon indicative of the company, brand, or website type? Quickly recognizing the category of the website or the brand it belongs to is made easier with a well-designed icon. Showing the image to others and asking them for their related ideas might be a fun exercise.
Does the favicon convey its intended meaning? Bear in mind that the tiny image will make it hard to make out fine details. Don’t hues that are too dazzling to your eyes. The focus should be on the website’s content, not on these.

Using specialized web services might help you avoid mistakes and generate icons that display correctly in varied circumstances. To see how a website’s favicon appears on various devices, you can use a tool like Realfavicongenerator.

In addition to verifying and showing the display, the service also offers suggestions on how the icon could be enhanced.
When making the icon itself, be careful to select the appropriate picture size and format.

What size and style should the favicon take?

As a raster image, the size of a favicon is expressed in pixels. The majority of browsers and devices typically accept a favicon size of 16×16 pixels in ICO, PNG, or JPG format.

The size can vary from 24×24 pixels to 32×32 pixels to 64×64 pixels and beyond, depending on the operating system and version of the browser. As an illustration, Google suggests making favicons that are 48×48, 96×96, 144×144, etc., in increments of 48 pixels. This makes it possible to resize the image in the browser without sacrificing quality.

In case you are still uncertain about the favicon size to use, try using icons in ICO or PNG format with dimensions of 16×16 or 32×32 pixels. However, you should think about the platform requirements for ideal sizes if you care about UX/UI.

We can now determine which services are capable of making favicons.

Apps that can generate favicons

A simple Google search for “favicon online” will turn up results for websites that offer favicon generation services. The basic idea behind most of these programs is the same: you input an image’s dimensions and format, and the service then gives you an icon that’s ready to be downloaded. You may design your own favicon from the ground up using several generators; you can pick the colors, forms, and everything else.

We recommend using the Favicon.io service

Please visit https://favicon.io/ for further information. A website that lets you make a favicon out of any kind of graphic, text, or emoji. On the Converter tab, you may convert images into favicons, and on the Generate tab, you can transform text into favicons.
You have the option to select the background and favicon colors. Constructs icons with a variety of sizes in the ICO and PNG formats. The favicon can be easily added to your website by downloading the icon or copying the code.

Adding a favicon to a website

Without a content management system, you will need:

Step 1: On the website’s main page, insert a code snippet that specifies the font, size, and type of data being transferred between the … tags. You have to give the address (URL) of where the icon is located. Then the file format and name of the icon—favicon.png is one example.

<head> ... <link rel="icon" href="https://URL site/favicon.ico" type="image/x-icon"> ... </head>

Step 2: Replace the current file with the one you just altered, and then save the changes if you made them outside of the hosting environment. It’s more practical to use a code editor by connecting to the file directly on the server through FTP. Take Notepad++ as an example.

Step 3: After that, either put the icon file in the pictures folder or the public_html folder, which is the root folder of the site (html; site; “www”). Choose an external FTP client or use the one that comes with your hosting control panel to handle your files.

Verify that the favicon appears in the most used browsers once you’ve added the code. Simply append the service address to the end of the URL to accomplish this: https://www.google.com/s2/favicons?domain=your website address, respectively.

In the header.php template file, the code snippet is also provided for content management system (CMS) websites such as WordPress, Drupal, and Joomla.

Finding the Favicon area in the settings, uploading a picture in the required format and size, allowing its application, and republishing the pages simplifies the procedure for websites made using a builder.

If the favicon fails to appear, what may be done?

There are a number of possible explanations as to why the browser tab does not display the favicon. This is a selection of a few.

Web page caching in web browsers. If that doesn’t work, try clearing your browser’s cache and trying again. You can stay on the website and clear the cache by pressing CTRL+F5.
The icon is sized or formatted incorrectly. Make that the favicon code is compatible with the format and has all the required properties.
Code placement mistake. Verify that the section is where you should put the favicon code.
There has been insufficient time. It may take anything from two weeks to two months for search engines to index a favicon.
You can’t use the robots.txt file to index the icon. Enable indexing; get it right Permit just favicon.ico files to Open the file favicon.ico.
Unsuitable poster. Before you approve this image, make sure it doesn’t include any of the forbidden symbols (offensive photographs, 18+ images).
Favicon is of low quality or doesn’t stand out. When icons are low resolution or stolen from other sources, the search engine may choose to disregard them.
Search engine filters on the site. Indirect indicators of filters include a sudden decline in traffic for no apparent reason, the removal of a large number of sites from search results, and complaints about problems with the website in Google Search Console.

If you are still unable to determine the cause, try checking the favicon’s appearance and validity on specific services. As an example, Favicon Checker displays the favicon’s presentation in different browsers and lets you know if there are any problems.
When the Touch icon is missing from iOS Safari’s root directory, the service will notify the user.

Let’s summarize

Adjacent to the page title, you’ll see a favicon, which is an emblem representing a website.
The use of a favicon helps increase brand awareness and distinguishes a website from competitors.
The most common formats for favicon images are ICO, PNG, and SVG.
Other sizes are dependent on placement; 16×16 pixels is the minimum size for an icon.
The completed icon is inserted into the website’s root directory within the element.
There are checker services that can help you find display issues.

Fill out the Brief

Bohdan Prytulyak( CEO )

Founder and head of the PBB Design web studio since 2005

What Is a Favicon, Why Do You Need it?