Contents
  1. Favicon: a plain-English definition
  2. What a favicon represents
  3. Why the favicon matters in vector logo work
  4. Vector geometry, raster images and file containers
  5. Key takeaways

Favicon: a plain-English definition

A favicon is the small icon a website supplies so browsers and other software can show it next to the site's name. The word comes from "favorites icon," because browsers first used it beside saved bookmarks, which some browsers called favorites. Today it commonly appears in browser tabs, bookmark lists, the browsing history and the address bar. Depending on the platform, it may also appear in search results or as a shortcut on a device's home screen.

In web design, the favicon is the site's identity at its smallest. When a visitor has many tabs open, the favicon is often the only visual cue that tells them which tab belongs to which site.

What a favicon represents

A favicon stands for the brand or website as a whole, but it rarely shows the full logo. Because it is displayed so small, it usually carries a single recognizable element taken from the logo system. Common choices include:

  • The brand mark: the standalone symbol or icon portion of a logo, without the wordmark.
  • A monogram or single letter: an initial drawn from the brand name, often set in the brand's typeface or a custom letterform.
  • A simplified version of the logo: the same idea with fewer details, thicker strokes and fewer colors.
  • A distinctive shape or color block: a basic form that reads as the brand even when almost no detail is visible.

Choosing the favicon symbol is therefore a decision about which part of the identity people will recognize when everything else is removed. A full horizontal logo with a wordmark (the brand name set as type) and a tagline usually becomes illegible at favicon size, so the symbol is selected or adapted to survive that reduction.

Why the favicon matters in vector logo work

Logos are typically built as vector artwork: shapes defined by paths, anchor points and curves, so they can be scaled to any size without losing sharpness. A favicon, by contrast, is usually seen as a very small grid of pixels on screen. That shift from scalable geometry to a tiny pixel display is what makes favicon preparation a distinct step in delivering a logo.

When a vector mark is reduced to favicon size, fine details can blur together, thin strokes can fade or disappear, small gaps (counters) inside letters can fill in, and closely spaced elements can merge. For this reason, designers often create a dedicated favicon version of the mark rather than simply shrinking the master logo file. Typical adjustments include removing secondary details, thickening strokes, enlarging openings, simplifying the color palette and aligning edges to the pixel grid so they render crisply.

Vector geometry, raster images and file containers

Three different things are often blurred together when people discuss favicons, and keeping them separate avoids confusion:

  • Vector geometry: the paths and shapes in the logo source artwork, usually created in a vector drawing application. This is the master from which favicon versions are made.
  • Raster content: the pixel image the browser actually displays. A raster favicon is a fixed grid of pixels, so it is typically exported at specific sizes rather than scaled freely.
  • File container: the format that packages the favicon, such as ICO, PNG or SVG. ICO is a container that can hold several raster images at different sizes in one file. PNG holds a single raster image. SVG holds vector geometry described as code.

An SVG favicon keeps the vector geometry intact, while ICO and PNG favicons store pixels. Support for each format differs between browsers and platforms and changes over time, so the exact set of files and sizes a site should provide is best confirmed against current browser and platform documentation. No specific size or support figures are given here because none were supplied as confirmed evidence.

Key takeaways

  • A favicon is the small icon that identifies a website in tabs, bookmarks, history and similar places.
  • It represents the brand through one compact, recognizable element, usually a symbol, monogram or simplified mark rather than the full logo.
  • It is normally derived from the vector logo master but displayed as a small raster image, which is why it often needs its own simplified artwork.
  • The favicon's format (ICO, PNG or SVG) is a container choice that determines whether it holds pixels or vector geometry.