General · EdgepediaSeptember 17, 20268 min read

Favicon

A favicon (short for "favorite icon") is a small icon associated with a website, displayed by browsers in page tabs, bookmarks lists, and other parts of the user interface.¹ The classic favicon is a 16 x 16 pixel image stored in the GIF, PNG, or ICO format, though modern sites commonly supply several sizes and formats for different contexts.¹

Key fact	Detail
Definition	A tiny icon included with a website, shown in the browser's page tabs, bookmarks menu, and formerly the address bar¹
Typical size and formats	Usually 16 x 16 pixels; stored as GIF, PNG, or ICO¹
Origin	First appeared in Internet Explorer 5.0 in March 1999 as a `favicon.ico` file in the site's root directory; standardized by the W3C in the HTML 4.01 recommendation in December 1999²
HTML declaration	`<link rel="icon" href="favicon.ico">` in the document head; `shortcut icon` is a historical, non-conforming variant still supported for compatibility³^•⁴
Multiple icons	When several `rel="icon"` links exist, the browser selects among them using the `media`, `type`, and `sizes` attributes³
Google Search requirements	Square (1:1) icon of at least 8 x 8 px, larger than 48 x 48 px recommended; formats BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF; one favicon per hostname⁵
Privacy dimension	Favicon caches have been used as a tracking and history-sniffing vector because they can persist and be shared across sites⁶^•⁷

Purpose and display locations

The favicon identifies a site visually. It appears in the browser tab containing each open page and next to bookmarked pages in the bookmarks panel, helping users confirm they are in the right place and reinforcing brand consistency.¹^•⁸ In older browsers the icon also appeared in the address bar next to the URL; most modern browsers replaced that address-bar icon with an image indicating whether the site uses HTTPS.¹

Declaring a favicon in HTML

A favicon is added by saving the image in a supported format such as .ico, .gif, or .png within the site's file structure and adding a <link> element to the HTML <head>:⁸

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

Most browsers automatically use a favicon.ico file found at the site root even when no <link> element is present, so many sites omit the element; an explicit element is still useful when the icon is stored elsewhere.⁸

Multiple icons. A page may declare several icons. The browser uses their media, type, and sizes attributes to pick the most appropriate one, and if several are equally appropriate it uses the last; if the chosen icon later proves unusable, for example because its format is unsupported, the browser falls back to the next-most appropriate.³ The sizes attribute takes a space-separated list of dimensions in the form widthxheight, or the keyword any for scalable images.⁹ The HTML standard's example shows one page declaring PNG, ICO, ICNS, and SVG icons at sizes from 16x16 up to 32768x32768.⁴

For historical reasons the icon keyword may be preceded by shortcut, in which case the entire rel value must be exactly shortcut icon; MDN describes this link type as non-conforming and ignored, and advises authors not to use it.⁴^•³

Platform-specific icons

Apple devices. Apple's iOS does not use the standard icon link type or the sizes attribute to choose a home-screen icon; it uses the non-standard apple-touch-icon link type instead.³ Sites commonly provide several apple-touch-icon sizes for different devices, such as 152x152 for a non-Retina iPad, 167x167 for an iPad Pro with a Retina display, and 180x180 for a 3x-resolution iPhone.⁸ For Safari's pinned tabs, Apple's documentation specifies a single-layer SVG with a viewBox of "0 0 16 16", drawn entirely in 100% black on a transparent background, with the display color set by the color attribute of <link rel="mask-icon">; the pinned tab icon accepts no additional colors.¹⁰

Web app manifests. For installed web applications, icons are declared in the icons member of the JSON web app manifest, with src, sizes, type, and purpose properties; browsers use these as hints for where and how to display each icon.¹¹ The purpose values include monochrome (used as a solid-fill mask), maskable (designed so parts outside a safe zone can be masked away), and any.¹¹ In a maskable icon the safe zone is a circle centered on the icon with a radius of 2/5 (40%) of the icon size, and the user agent must not make any pixel within it transparent.¹² Safari 17.2 on macOS improved web app icon loading and asks developers to supply at least one opaque, full-bleed maskable square icon, falling back to the apple-touch-icon when the manifest lacks a suitable high-resolution icon.¹³

Favicons in search results

Google Search can show a site's favicon next to its results. To be eligible, the site must add a <link rel="icon"> tag to the home page header, and Google also accepts the apple-touch-icon and apple-touch-icon-precomposed values; the href may be a relative or absolute URL, including one hosted on a content delivery network.⁵ The guidelines require a square icon of at least 8 x 8 px (larger than 48 x 48 px is recommended), a stable URL, and crawlability of both the icon file by Googlebot-Image and the home page by Googlebot.⁵ Google supports one favicon per site, where a site is defined by the hostname: https://www.example.com/ and https://code.example.com/ can each have their own favicon, but a subdirectory such as https://example.com/news cannot have its own.⁵ A favicon that Google deems inappropriate, including pornography or hate symbols, is replaced with a default icon.⁵

History

The favicon appeared in Internet Explorer 5.0, released in March 1999.² The mechanism was deliberately simple: a developer placed a file named favicon.ico in the root directory of the web server, and Internet Explorer looked there for an icon when adding a site to the user's Favorites list. The .ico format was chosen because it was the standard Windows icon format, and the root-directory convention was easy to satisfy on Windows web servers.¹⁴ At first the icon was visible only in the Favorites list, and site operators noticed that requests for favicon.ico in their server logs gave a rough count of how many people had bookmarked the site.¹⁴

Standards work followed. In December 1999 the W3C standardized the favicon in the HTML 4.01 recommendation, and the emerging approach used the <link> element so developers could point to an icon at any URL rather than depend on a fixed root-directory file.²^•¹⁴ The shortcut icon spelling from that era remains supported in browsers for historical reasons.¹⁴

Privacy and security

Because browsers fetch and cache favicons automatically, the mechanism has repeatedly drawn privacy scrutiny. A 2016 Firefox vulnerability, fixed in Firefox 48 and Firefox ESR 45.3, let a remote server keep the favicon network connection open after the page was closed, allowing a malicious site to keep sending requests to the browser and potentially track a user across multiple IP addresses as they changed networks.⁶

Favicon caching as a tracking vector. Research presented at NDSS 2023 showed that browsers serve favicons from a cache shared across websites with no partitioning key, which turns the cache into a cross-origin tracking vector. Because the Performance API reports a network request only when the favicon was not served from cache, an attack page can cycle through the favicon URLs of popular sites and infer from the absence of entries which of those sites the user has visited, a history-sniffing technique that works in Chrome and, through a redirection chain, in Safari; the same research found that Safari served favicons from the regular-browsing cache during private browsing sessions.⁷ Earlier work had demonstrated same-origin favicon tracking, and the 2023 study showed the cross-origin variant remained feasible despite those disclosures.⁷

Format choices

Practitioner guidance converges on supplying more than one format rather than treating the choice as exclusive: PNG for reliable rendering at defined sizes across browsers, SVG for crisp scaling from a single small file, and ICO for the automatic /favicon.ico request browsers make when no icon is declared.¹⁵ An SVG favicon works in modern desktop browsers when declared with type="image/svg+xml", with a PNG or ICO fallback for Safari and other contexts that ignore vector tab icons; a single SVG can render sharply at both a 32 x 32 tab size and on high-density displays because the browser rasterizes it at render time.¹⁶

References

Initially written Sep 17, 2026 · Reviewed: Sep 17, 2026; Sep 19, 2026; Sep 30, 2026; Oct 15, 2026 · Edited: Sep 19, 2026; Oct 15, 2026