Definition:

A favicon, short for favorite icon, is the icon that visually represents a website or web page. It appears in tabs, bookmarks, browsing history and other areas of the browser, and it may also be displayed next to the site name in some search results.

It usually adapts a logo, symbol or other recognizable brand element to a very small square format. Its main purpose is to help people identify a site when it appears alongside other open or saved pages.

Although the ICO format and a 16 × 16 pixel size are associated with the favicon’s origins, a modern implementation uses several sizes or a scalable resource to support browsers, high-density displays, shortcuts and other interfaces.

Purpose of a favicon

A favicon is part of a site’s visual identity. It does not replace a logo or explain a brand by itself, but it provides a consistent reference in places where there is little room for other graphics.

In a window with many open tabs, the icon helps people find a page quickly. It also makes a bookmark or saved shortcut recognizable without requiring the full title to be read first. This visual cue supports the user experience, particularly when the design remains simple and distinguishable at a small size.

Its presence does not automatically improve loyalty or search rankings. Its value comes from consistency with the brand, legibility and reliable availability wherever the file is used.

Technical requirements

A single 16 × 16 file may not be enough. Browsers and devices use icons in different contexts and select the most appropriate resource from those declared. A typical implementation may include the following:

ICO: It maintains broad compatibility and can contain several resolutions within one file.
PNG: It supports transparency and works well for specific raster sizes.
SVG: It remains sharp when scaled in compatible browsers, although fallbacks may still be needed for other contexts.
Apple touch icon: This is a separate PNG resource for shortcuts saved on Apple devices.
Manifest icons: These are intended for installable web applications and complement the document favicon.

Each resource should start from a square composition. Sites commonly provide 16 × 16 and 32 × 32 versions for tabs, as well as larger files such as 180 × 180 or 192 × 192 for shortcuts and devices. The exact combination depends on the platforms the site needs to support.

HTML implementation

A browser discovers a favicon through one or more <link> elements in the document’s <head>. The rel, href, type and sizes attributes describe its relationship to the page, location, format and available dimensions.

A configuration can declare an ICO file, an SVG variant and an icon for Apple devices:

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

Some browsers also look for /favicon.ico at the domain root, but declaring the resources avoids relying on that behavior alone. Each path should return successfully, serve the expected file type and remain accessible to users and crawlers.

Visibility in Google Search

Google may display a favicon beside a site’s search result. To be eligible, the home page must declare the icon, both the page and the file must be crawlable, and the resource should use a stable URL.

Google’s favicon guidelines require a 1:1 aspect ratio and a minimum size of 8 × 8 pixels, although a file larger than 48 × 48 is recommended. Google supports one favicon per hostname: a subdomain may have its own, but a subdirectory cannot define a separate favicon for search results.

Meeting these requirements makes the icon eligible but does not guarantee that it will be shown. A favicon helps identify the source of a result; by itself, it is not a factor that raises organic rankings.

Design practices

The available area is small, so simple shapes with sufficient contrast work best. If a complete logo becomes unreadable, a symbol, initial or simplified version can preserve recognition more effectively.

The icon should be checked against light and dark backgrounds and in interfaces that apply different crops. Fine detail and tiny lettering tend to disappear when the image is reduced. Transparency can help, provided the edges retain enough contrast and do not rely on one background color.

Testing and maintenance

After publication, the source code, HTTP response and appearance should be checked in several browsers and devices. An old version can persist because of browser, website or content delivery network caching, so a stale icon does not necessarily indicate an HTML error.

When the visual identity changes, the resource should be replaced in a controlled way and its URL kept stable where practical. Apple icons and installable app icons also need to be checked because each resource may be updated and cached differently.