What is a favicon?

Favicon definition

A favicon is the small icon a website uses to identify itself in places such as browser tabs, bookmark lists and browser history. The name is generally understood to be short for "favorites icon," a reference to browser bookmark lists, which were called favorites in some browsers. In practice, a favicon is usually a compact version of a brand's logo: a symbol, monogram or single letter rather than the full logo with its wordmark.

Why favicons matter in vector logo design

For logo work, a favicon is a deliverable derived from the master logo artwork, not a separate brand asset. It is shown far smaller than almost any other logo application, so designers usually have to decide which part of the logo can stand on its own. Thin strokes, small counters (the enclosed spaces inside letters such as o or e), fine gaps and long wordmarks tend to blur or disappear at that scale. The usual result is a simplified mark that keeps the logo's recognizable shape and color while dropping detail.

Because the favicon is cropped to a square space, the source artwork is typically prepared on a square artboard, the defined canvas area in a vector drawing application. A horizontal logo rarely fits that space without becoming too small to read, which is another reason the favicon is often a symbol or initial rather than the full lockup.

Vector geometry, raster images and file containers

Favicon files are easy to confuse because three different ideas overlap: how the artwork is described, which file format stores it, and what the browser finally displays. Keeping them separate makes favicon preparation clearer.

• Vector geometry: shapes described by paths, points and curves, so they can be redrawn sharply at any size. A logo's master file is normally vector artwork.
• Raster content: an image made of a fixed grid of pixels. Once artwork is rasterized, enlarging it does not add detail.
• SVG: a vector file format that stores path geometry as text. An SVG favicon keeps the logo as scalable shapes.
• PNG: a raster image format. A PNG favicon is a pixel image exported from the vector artwork at a chosen size.
• ICO: a container format, meaning a file that can hold more than one image. An ICO favicon typically bundles raster images at several sizes in one file.

Even when a favicon is delivered as an SVG file, the screen ultimately displays it as pixels. The difference is that the browser renders the vector geometry at the needed size, instead of scaling a pixel image that was exported in advance.

Preparing logo artwork for a favicon

• Start from the vector master logo so every exported version comes from the same geometry.
• Choose the part of the logo that remains recognizable when very small, such as the symbol or an initial.
• Simplify detail that will not survive the reduction: hairline strokes, tight spacing and small interior shapes.
• Convert any text to outlines, which turns letters into vector paths so the icon does not depend on a font being installed.
• Check contrast against both light and dark browser interfaces, since the favicon may appear on either.
• Preview the result at its actual display size rather than judging it zoomed in on the artboard.

On the website itself, the favicon is declared in the page's HTML, usually with a link element in the document head that points to the icon file. That step is typically handled by whoever builds or maintains the site, using the files the designer supplies.

Limits of this entry

This definition does not list the exact pixel sizes requested by particular browsers, operating systems or app platforms, and it does not state which browsers currently accept SVG favicons. Those requirements vary and change over time, so confirm them in current browser and platform documentation before finalizing a favicon file set.