Favicon Within Its Limits

It may seem that a favicon is familiar to everyone. Yet even among developers—including front-end specialists—the topic is rarely obvious. For those outside the web world, these tiny icons might be called a shortcut icon, tab icon, or simply “icon.” Regardless of the terminology, the subject is far broader than it appears.

What Exactly Is a Favicon?

A favicon is a graphic representing a website, visible in the browser tab. It helps users quickly identify a site among many open tabs. Technically, implementing it requires just a single line of code in the section:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

In the early days, the only supported format was .ico. While today we have more options, the original format is still often misunderstood. An .ico file is not a simple raster but a container that can hold several versions of the same image at different resolutions (e.g., 16×16, 32×32, up to 256×256 px).

Lazy implementation often meant including just a single small image. On modern Retina displays, this resulted in a “pixel art” effect instead of a crisp logo.

Favicons Today: PNG Isn’t Enough

Support later expanded to raster formats like JPG, PNG, and GIF. While this seems simpler, many developers still attach a single low-resolution PNG without specifying the sizes attribute:

<link rel="icon" type="image/png" sizes="32x32" href="icon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192x192.png">

Some browsers even support animated GIFs, but due to minimal usage (and potential user frustration), this practice is fading.

SVG and Base64

The real breakthrough came with the vector SVG format, offering lossless scaling on any screen.

Today, the best practice combines tradition with modernity: include an .ico file for older browsers and an .svg for contemporary ones:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

For specific cases, Base64 encoding allows embedding the icon directly in the HTML, saving an HTTP request:

<link href="data:image/x-icon;base64,AABE....qAVB" rel="icon" type="image/x-icon">

New Environments, Old Problems

Problems arise beyond the browser tab. Today, a website icon must appear in Windows menus, macOS docks, Android and iOS home screens, or smartwatch notifications. One format cannot cover all these cases. Desktop systems prefer .ico, but Android and iOS don’t fully support it, and even SVG can have issues in certain environments.

Dark Mode Challenges

The dark mode adds another layer of complexity. While changing a website’s colors is simple with CSS, a favicon with a transparent background can vanish against a dark system UI.

A black logo on a black background simply disappears.

This hampers navigation and looks extremely unprofessional. Interestingly, this issue affects even major retail and luxury brands. A quick glance at open tabs often reveals that many market leaders have “lost” their visual identity in dark mode—a result of not keeping up with UI evolution, even for giants like Google or Apple.

How these issues play out in practice, and whether it’s really worth worrying about sixteen pixels squared, will be covered in the next post.