Design a matching logo and favicon

The short answer

A matching favicon is usually not a shrunken copy of the full logo. It is a simplified mark taken from the logo, such as the symbol, a monogram or one distinctive shape, redrawn so it stays readable at 16 and 32 pixels. Because browser tabs can be light or dark, the favicon also needs a dark mode plan. That can be one design with enough contrast on both backgrounds, or an SVG favicon that switches colors with the user's color scheme, backed by raster fallbacks that work everywhere.

What makes a logo and favicon match

The favicon should be recognizable as the brand without repeating every detail. Keep the core shape, the main brand color and the overall proportions. Drop what disappears at small sizes: taglines, wordmarks, thin strokes, gradients and fine interior detail. If the logo is only a wordmark, the usual approach is to build a mark from it, such as the first letter in the brand typeface or a distinctive letterform.

• Keep: the primary symbol or initial, the main brand color, the silhouette.
• Simplify: stroke weights, corner detail, overlapping elements.
• Remove: text below the mark, taglines, small decorative elements, subtle gradients and shadows.

Start from a real vector master

Draw the favicon from the logo's editable vector artwork, not from a screenshot or a large PNG. Check the file itself. An .svg, .ai, .eps or .pdf extension does not guarantee editable paths, because any of these can contain an embedded raster image or a flattened preview. Open the file in a vector editor and confirm that the shapes are selectable paths. If the logo exists only as a raster image, it needs to be traced or redrawn before it can serve as a clean favicon source.

Build the favicon on a square artboard, separate from the main logo file. This leaves the master untouched and gives the small-size version its own simplified geometry instead of a scaled-down copy.

Designing for tiny sizes

• Work on a pixel grid at 16×16 and 32×32 and align key edges to whole pixels so they render crisply.
• Use heavier strokes than the main logo; hairlines blur into the background at small sizes.
• Fill most of the square. Excess padding makes the icon look smaller than neighboring tabs.
• Use a few solid colors with strong contrast between the mark and its background.
• Preview the result at actual size in a real browser tab, not only zoomed in inside the design tool.

Planning dark mode variants

Favicons appear on tab bars, bookmark lists and history pages whose backgrounds can be white, gray or near black depending on the browser theme and the operating system's light or dark setting. A dark mark with a transparent background can disappear on a dark tab bar, and a white mark can disappear on a light one. There are three common ways to handle this.

Approach | How it works | Trade-off

Built-in background | The mark sits on a solid shape, such as a rounded square or circle in a brand color | Works on any background and in every format, but adds a container shape the logo may not have

Contrast outline | A thin light or dark outline surrounds a transparent mark | Keeps transparency, but the outline can look heavy at 16 pixels

Color-scheme SVG | An SVG favicon contains a prefers-color-scheme media query that swaps fill colors | Adapts automatically where supported, but needs raster fallbacks for browsers that ignore it

Two caveats apply to the color-scheme approach. First, the media query reflects the browser's or system's preferred color scheme, which does not always match the actual color of the tab bar, since some browsers allow custom themes. Second, ICO and PNG files cannot switch colors, so any raster fallback should be the design that holds up on both light and dark backgrounds. For many brands, a mark on a solid background is the most dependable choice.

Implementing an adaptive SVG favicon

An SVG favicon can carry its own style block. The example below shows the idea: the mark is dark by default and switches to a light fill when the user prefers a dark color scheme. The root svg element also needs the standard SVG namespace attribute, which is omitted here.

<svg viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z" />
</svg>

The colors and path above are placeholders. Replace them with the simplified favicon artwork and the brand's own light and dark values. Then reference the SVG alongside raster fallbacks in the page head:

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

Browser support for SVG favicons and for media queries inside them varies and changes over time. The supplied material did not include confirmed support details, so test the result in the browsers your audience actually uses, in both light and dark modes, before relying on it.

A practical favicon file set

File | Purpose | Notes

favicon.svg | Scalable favicon for browsers that support SVG | Can include light and dark variants through a media query

favicon.ico | Fallback for older browsers and tools that request it by default | Typically bundles small sizes such as 16, 32 and 48 pixels

apple-touch-icon.png | Home screen icon on Apple devices | Commonly 180×180 with an opaque background, since transparency is not handled well there

PNG icons for a web app manifest | Icons for installable web apps and Android home screens | Commonly 192×192 and 512×512

Source vector file | The editable master for future changes | Keep the logo master and the favicon artboard together

Export every raster file from the vector favicon artwork, and check the smallest sizes by eye. Automatic downscaling can soften edges, and the 16-pixel version sometimes needs manual pixel adjustments.

Rights when the logo is not yours

If you are building a favicon from a logo you did not create, the right to download the logo is not the same as the right to modify it or to use it as an icon. A favicon is a modification of the artwork, and the logo may also involve licensed fonts and a registered trademark. Confirm with the brand owner or their brand guidelines that a derived icon is allowed, and use the official assets they supply where possible.

What this guide could not confirm

No subject-specific evidence was supplied, so this guide does not cite browser version numbers, measured legibility thresholds, tool prices or test results. The sizes and techniques described are common conventions. Check current browser documentation and test on real devices to confirm how your favicon and its dark mode variant actually render.