What is a favicon?

A favicon is the small image that identifies a website inside the browser. It appears in the open tab, right next to the page title, and also in bookmarks, in browsing history, and in the suggestions the browser shows as you type an address. The word comes from "favorite icon", because it was in the favorites list that it was first used back in the mid-1990s, with the first graphical browsers. Today the favicon is much more than a decoration: it is the face a website shows in a space where dozens of tabs and options compete for attention. Even though it measures just a few pixels, a favicon carries useful information: it tells you, without reading the whole title, that a tab belongs to a particular site. It is the first visual impression many people get of a brand on an everyday basis, and that is why even a system like Kardex Tauro has its own, so that whoever manages inventory with it can spot the right tab at a glance among many open ones.

What is a favicon used for?

A favicon serves several purposes, all of them related to identifying, differentiating, and building trust:

Identifying the site at a glance. With many tabs open, the icon lets you find the right page without reading every title.
Reinforcing the brand. It repeats the logo or its colors on every tab, in history, and in bookmarks, which builds recognition over time.
Looking professional. A site without a favicon feels incomplete or neglected compared with one that has it.
Improving the user experience. It makes it easier to stay oriented and return to a page, especially with many windows or tabs open.
Standing out from competitors. It helps a page stand apart from similar sites saved in the bookmarks bar.
Personalizing shortcuts. Apps installed from the browser and desktop shortcuts use a version of the favicon as their icon.

In short, a favicon does the same job as the sign above a shop door, but in miniature: it lets people recognize, remember, and tell a site apart.

Where does a favicon appear?

Favicons show up in several places inside the browser and the operating system:

In the browser tab. This is the main place: the icon appears to the left of the page title.
In the bookmarks or favorites bar. Every saved site is identified by its icon, so you can find it quickly among dozens of favorites.
In the browsing history. The icon helps you recognize pages you visited days ago.
In autocomplete suggestions. As you type an address, the browser shows an icon next to each suggestion.
In apps installed from the web. When a site is installed as an application, its icon is used on the desktop or in the device's app menu.
In news readers and aggregators. Many platforms use the favicon to represent the source of each article.

Each of these places is a touchpoint with the user. That is why the favicon must look good at any size and on any background color.

What size and format should a favicon have?

A favicon is designed to look good at very small dimensions, because it has to be readable in spaces of just a few pixels. The classic sizes and their typical uses are:

Size	Where it is used
16 × 16 pixels	Browser tab; the classic favicon
32 × 32 pixels	Tabs on high-density screens and shortcuts
48 × 48 pixels	Bookmarks, history, and some operating systems
192 × 192 pixels	Icon for installable web apps (PWA)

As for format, the traditional one is ICO, a file type that can hold several resolutions at once and that browsers have recognized since the early days of the web. Today PNG is also very common, because it supports transparency and stays crisp on any screen, as is SVG, which is vector-based and scales without losing quality. A recommended practice is to publish at least a 32 × 32 or 64 × 64 pixel PNG, or an ICO file with several sizes inside, to cover most cases.

How to create a favicon?

Creating a favicon does not require being a graphic designer. You can start from the brand's logo or from a simple symbol and follow these steps:

Simplify the design. At 16 × 16 pixels there is no room for fine details; a single clear shape with high-contrast colors works best.
Preview it small. What looks good at full size can become illegible as a thumbnail, so the design must be reviewed at its actual size.
Use design tools. Vector design programs or image editors let you export the icon in several sizes and formats.
Use online converters. Free services can turn a PNG or JPG image into an ICO file with several resolutions included.
Stay consistent with the brand. Use the same colors and shapes as the website so the icon is instantly associated with the brand.
Name the file properly. The classic convention is to call it favicon.ico so the browser finds it without any extra configuration.

The result should be recognizable in half a second, because that is about how long a user spends looking at a tab.

How to add a favicon to a website?

There are two main ways to place a favicon on a website. The first is to upload the file to the site's root folder with the name favicon.ico. When the browser opens a page, it automatically requests /favicon.ico and, if the file exists, shows it without any code changes. This is the simplest method and it works on almost any hosting. The second is to link it from the HTML, which gives full control over the path and the format. To do that, you add a line inside the head of the page, between the header tags, similar to this one: <link rel='icon' href='favicon.ico'> If the file lives in another folder or has another name, you write the complete path in the href attribute. For a PNG file, the line can look like this: <link rel='icon' type='image/png' href='favicon.png'> On sites built with content management systems such as WordPress, uploading the file from the admin panel is usually enough; the system generates the proper tag for you. On a static site, you simply upload the file over FTP and, if you want, add the link line to each page.

Common favicon mistakes

Even though the concept is simple, problems are common when implementing it. The most frequent ones are:

The icon does not show up because of the browser cache. This is mistake number one: the browser stores the old favicon and keeps displaying it even after the file has changed. The fix is to clear the cache, test in a private window, or force a page reload.
Wrong path or file name. If the file is not in the root folder or its name does not match the link, the browser cannot find it and shows the generic icon.
Unsupported format. Some older browsers only accept ICO; if you use only PNG or SVG, the icon may not appear on every machine.
Badly calculated size. A very large image does not scale down well and ends up looking blurry or unreadable in the tab.
Expecting the change to be instant. Besides the local cache, some content delivery networks take a while to propagate the new icon.
Confusing the favicon with the full logo. A full logo almost never works at 16 × 16 pixels; you need a simplified version.

To check that everything is in place, just open the site in a private window and look at the tab: if the icon appears crisp next to the title, the favicon is working. All in all, the favicon is a small detail with a big impact on the image of any website. It identifies the site, reinforces the brand, and improves the experience of anyone browsing. And, as with all good details, when it is done well it goes unnoticed: the tab is simply recognized at a glance.

Labels:

#favicon #icon #web