Overview

A favicon (short for "favorite icon") is a small graphic file that represents a website or a single web page in a browser's user interface. Favicons typically appear in browser tabs, next to the page URL in the address bar, in bookmarks or favorites lists, and in other places such as history entries and search results. Although the original and most familiar size is 16×16 pixels, modern browsers and devices use larger sizes too, so designers commonly supply several versions to accommodate different displays.

Characteristics and common formats

Favicons are usually square and designed to be recognizable at very small sizes. Common file formats include the legacy ICO format (which can contain multiple resolutions in one file), PNG for lossless raster images, and increasingly SVG for vector-based icons that scale cleanly. Typical sizes to provide are 16×16 and 32×32 for desktop browsers, and larger sizes (for example 48×48, 64×64 or higher) for high-resolution and pinned-tab contexts. For mobile home screens and application shortcuts, separate "touch icons" in sizes such as 180×180 are often supplied.

History and adoption

The favicon concept originated as a specific feature in early desktop browsers and was popularized when browsers began showing the icon alongside a site's entry in a user’s list of favorites. Over time, support expanded so that nearly all modern browsers recognize a favicon provided by a web page. Web standards evolved to recommend linking one or more icon files from a page's HTML so browsers can discover the appropriate image for the current context.

Uses, examples and best practices

  • How to provide a favicon: include a link element in the HTML head that points to an icon file, and optionally provide multiple files for different sizes and formats.
  • Design tips: use a simple, high-contrast shape, avoid fine detail, and test legibility at small sizes and on dark or light browser themes.
  • Technical notes: include fallbacks (for example both ICO and PNG), supply larger images for retina or pinned-site interfaces, and be aware browsers cache favicons so updates may require cache-busting techniques.

Distinctions and notable facts

Favicons are distinct from application icons used by installed native apps, though the same artwork is often adapted for both. Mobile platforms also use dedicated "apple-touch-icon" or similar files that differ from the standard favicon in size and purpose. Some platforms support vector favicons (SVG) that scale without loss, while others still prefer ICO or PNG. For further practical guidance and compatibility details, see resources at web icon guidelines and browser documentation at browser icon support.

Quick checklist:

  1. Provide at least a 16×16 and a 32×32 version; consider larger sizes for mobile and high-DPI.
  2. Offer both ICO and PNG (or SVG) formats for broad compatibility.
  3. Link icons in the page head and verify appearance in multiple browsers and devices.