Design logos for light and dark modes

A logo built for a light interface often fails on a dark one. The practical answer is to treat light and dark versions as a deliberate pair: two vector artworks that share the same shapes but use colors, and sometimes small structural adjustments, chosen for each background. For favicons, the pair can be delivered as separate files or as a single SVG that switches colors based on the viewer's color-scheme preference, with a raster fallback for browsers that do not support it. This overview covers general design and file-preparation principles rather than any specific brand's logo.

What a light and dark logo pair actually is

The light mode logo is the version intended for white or pale backgrounds, usually with dark or saturated brand colors. The dark mode variant is intended for near-black or deep-gray backgrounds, such as dark operating system themes, dark app interfaces and dark browser tabs. Both should be the same mark in recognizable form. The differences are in fill colors, stroke treatment, and whether the mark sits on its own or inside a container shape.

Why one version rarely works on both backgrounds

• Dark wordmarks and black outlines lose contrast and can nearly vanish on a dark background.
• Saturated brand colors that read well on white can look heavy or vibrate on near-black.
• Light artwork on a dark field often appears slightly bolder than the same artwork dark-on-light, so thin strokes and small counters may look crowded.
• Transparent raster files with antialiased edges prepared against white can show a pale fringe when placed on a dark background.
• Details that relied on white negative space, such as a white gap between two shapes, may stop reading once the surrounding background is dark.

How to build the dark variant

Automatic color inversion is a poor shortcut. It turns brand colors into unrelated hues and can flip the meaning of negative space. A better approach is to work element by element in the vector file and decide what each fill should become.

• Map each color deliberately: black or dark gray elements usually become white or a light neutral, while accent colors may be kept, lightened, or desaturated so they hold up against the dark field.
• Check contrast between each element and the intended background rather than judging by eye on a single screen.
• Review fine strokes and small gaps at the sizes where the logo will actually appear, and consider a slightly lighter weight or wider spacing for the dark version if the mark looks crowded.
• Decide whether the mark needs a container, such as a rounded tile or circle in a brand color, which can make one artwork work on both backgrounds.
• Keep the geometry consistent so the two versions read as the same logo, and record the color mapping in brand guidelines so others apply it consistently.

Favicons and dark mode

Favicons put the most pressure on this problem. They are shown at very small sizes, and the background behind them depends on the browser, the theme and the context, such as tabs, bookmarks or history lists. A favicon with a transparent background and a dark mark can disappear in a dark tab strip. There are two common remedies. The first is to give the icon its own solid or rounded background tile so it stays legible anywhere. The second is to make the icon respond to the user's color-scheme preference.

An SVG favicon can contain a CSS media query that changes its fills when the viewer's system or browser is set to dark mode. The snippet below shows the relevant part. The style and path sit inside the SVG root element, which still needs its standard namespace declaration. The hex values are placeholders, not recommended brand colors.

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

Another option is to reference separate light and dark icon files in the page head, each with a media attribute matching the color-scheme preference. In both cases, the query reflects the user's preference setting, not necessarily the actual color of the tab or surface behind the icon, so a self-contained background tile can still be the more predictable choice. Browser support for SVG favicons and for color-scheme switching varies. Providing a conventional raster favicon as a fallback, and testing in the browsers your audience uses, avoids relying on behavior that may not be present everywhere.

Check that the artwork is really vector

Recoloring for dark mode depends on having editable shapes. A file extension alone does not confirm this. An SVG, EPS or PDF can contain a placed raster image rather than paths, and some downloaded files are only raster previews of the logo. Open the file in a vector editor and confirm that the elements are selectable paths with their own fills. If the logo is an embedded bitmap, its colors cannot be cleanly remapped, and producing a proper dark variant may require redrawing or obtaining the original source artwork.

What to deliver

Asset | Intended use | Typical formats

Light mode logo | Pale and white backgrounds | SVG plus a print-ready vector such as PDF or EPS, with PNG exports

Dark mode logo | Dark interfaces and dark backgrounds | Same set as the light version

Single-color versions | Situations where only one ink or one color is possible | SVG and PNG in black and in white

Favicon set | Browser tabs, bookmarks, home screen icons | SVG (optionally color-scheme aware) plus raster fallbacks at the required sizes

Naming files clearly by background, for example by including light, dark or on-dark in the filename, reduces the chance of someone placing the wrong version. If fonts were used in a wordmark, converting the text to outlines in the delivered files avoids missing-font substitutions. Keep an editable master with live text separately if future changes are expected.

Adapting a logo you do not own

Being able to download a logo file does not grant permission to alter it. Recoloring a third-party logo for a dark interface is a modification, and the artwork, any typeface in it, and the trademark itself may each carry separate terms. Many organizations publish their own approved dark-background versions in brand or press kits. Using those, or requesting one, is safer than producing an unofficial variant.

Limits of this overview

No specific logo, brand guideline, browser version table or contrast measurement was supplied for this article. The guidance above reflects general design and implementation principles. Exact color values, required favicon sizes for particular platforms, and current browser support for color-scheme-aware icons should be confirmed against the target platforms' current documentation and by direct testing.