Convert logo for dark mode

The short answer

To convert a logo for dark mode, create a separate dark-background variant from the vector master. Do not just invert it. Recolor each element so it stays visible and recognizable on dark surfaces, and turn any shapes that were painted to match a white background into true cutouts. Then test the result on the actual dark colors it will sit on. For a favicon, you can either ship an SVG favicon that switches colors through a dark-mode media query, or design the icon inside a solid container shape so it reads on any browser tab color.

A few terms used throughout. A vector logo is built from mathematically defined paths rather than pixels, so you can recolor and resize it without quality loss. A reversed or knockout version is a light-on-dark variant, often a single light color, in which the background shows through openings in the artwork. Fill is the color inside a closed path. Stroke is the color along the path outline. A compound path combines several paths so that overlapping areas become holes. Prefers-color-scheme is a CSS media feature that tells a web page or SVG whether the user's system or browser is set to a light or dark theme.

Why inverting the colors is not enough

Automatic inversion turns brand colors into unrelated hues and flips shapes that were never meant to change. It also leaves behind any white fills that stood in for the background. On a dark surface, those fills show up as white blobs where there should be openings. A color logo on a dark background also behaves differently from the original. Dark navy, deep green or black elements may vanish, while saturated brights can look harsher than they did on white. Treat the dark-mode logo as a deliberate design variant with its own color decisions.

Before you start

• An editable vector master of the logo. A file extension such as SVG, AI, EPS or PDF does not prove the file contains clean vector paths. It may wrap an embedded bitmap, so open it and inspect the paths.
• Permission to modify the logo. Having a file is not the same as having the right to alter or reuse the mark, so confirm ownership or licensing first.
• The brand guidelines, if any exist. Many identity systems already define a reversed or dark-background version. A documented brand rule takes priority over the design recommendations in this guide.
• The real background colors of the target interface. Dark mode surfaces are often dark grays rather than pure black, so get the actual values from the product or website.

Step-by-step: building the dark-mode variant

1. Audit the original on dark backgrounds

Place the unchanged logo on several dark swatches, including the exact dark-mode surface color it will use. Note every element that disappears, loses its edge, or shows a background-colored patch. This list sets the scope of your changes.

2. Choose a variant strategy

• Single-color reversed: the whole mark in one light color. It is the most robust option and usually the simplest to read at small sizes.
• Adjusted full color: keep the brand palette, but lighten or replace the colors that fail on dark backgrounds. This keeps more brand character but needs more testing.
• Contained: put the logo on a solid shape, such as a rounded square or circle, that carries its own background. It works on any surface, which is useful for favicons and app icons where the platform controls the surrounding color.

3. Work on a duplicate

Copy the master onto a new artboard or into a new file with a clear name that marks it as the dark variant. Never edit the master in place.

4. Handle the typography

If the logo contains live text, keep a hidden or separate copy with the live text, then convert the visible wordmark to outlines. Converting to outlines turns letters into vector paths so the logo no longer depends on the font being installed. In Adobe Illustrator this command is commonly called Create Outlines, and in Inkscape it is Object to Path. Menu names and locations can change between versions, so confirm them in the version you use. After conversion, check that spacing and letter shapes match the original.

5. Recolor deliberately

Apply new colors through global swatches or named color styles, so the dark palette can be adjusted in one place. Replace dark brand colors with lighter tints, or with a light neutral, rather than letting them disappear. One common recommendation, not a requirement, is to try a slightly off-white instead of pure white for large light areas, since pure white can look glaring on dark gray. Write down every color value you choose so the variant can be documented alongside the brand palette.

6. Fix negative space and strokes

Find any shapes filled with white, or with the old background color, to fake openings, such as the inside of letters or gaps between symbol parts. Remove them and create real holes, usually by combining the outer and inner shapes into a compound path or by using a subtract or exclude operation. That way the dark background shows through. If the logo uses strokes, consider expanding them into filled paths so their weight stays fixed when the file is scaled or opened in other software.

7. Compensate for optical weight

Light shapes on dark backgrounds tend to look heavier and slightly larger than the same shapes in dark on light. If the reversed wordmark or thin details look bolder or start to fill in, try slightly thinning them, or open up tight gaps. Judge by eye at the sizes the logo will actually appear, and compare against the light version.

8. Simplify for favicon sizes

A favicon renders very small. Remove or merge fine details, drop taglines, and consider using only the symbol or a single letterform. Preview the icon at the smallest sizes browsers and platforms show it. Confirm the required sizes against current browser and platform documentation, because these requirements change and are not covered by the evidence for this guide.

9. Check contrast

Measure the contrast between each logo color and the dark background with a contrast checker. WCAG explicitly exempts text that is part of a logo or brand name from its text contrast minimums, so a target for a logo is a design choice rather than a documented accessibility requirement. As a benchmark, many designers borrow the 3:1 ratio that WCAG's non-text contrast criterion uses for graphical objects.

Exporting and implementing a dark-mode favicon

An SVG favicon can contain its own CSS, including a prefers-color-scheme media query, so one file can switch between light and dark colors. Export the simplified mark as SVG. Clean out editor metadata, keep the viewBox attribute so the icon scales correctly, and give the paths class names you can target in CSS. A standalone SVG file also needs the standard SVG namespace declaration on its root element. Most editors add it on export, and it is omitted from the snippet below for brevity. The color values and viewBox shown are placeholders, and the path data stands in for your own artwork.

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

Reference the SVG in the page head, together with a raster fallback for browsers that do not use SVG favicons. A typical pattern looks like this. The file names are examples.

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Another approach is to provide two separate image files and select them with a media attribute on the link elements. Browser support for SVG favicons, for media queries inside them, and for media attributes on icon links differs between browsers and changes over time. The evidence for this guide does not include current support data, so check up-to-date compatibility information before relying on any single method. If you need the icon to work everywhere, the contained strategy is the safest option. It is one icon with its own background, and it needs no theme switching.

How to confirm the result

• Outline or wireframe view shows only clean paths, with no hidden white background shapes and no embedded bitmaps.
• The wordmark is outlined in the delivery file, and a live-text copy is stored separately.
• On every target dark background, each logo element is visible and no white or background-colored patches appear.
• Your contrast checker values meet the target you set, and the values are recorded.
• The favicon is recognizable at its smallest rendered size.
• With the operating system or browser switched between light and dark themes, the favicon changes as intended, or stays legible if it uses a contained design. Browsers cache favicons aggressively, so clear the cache or use a private window before you judge the result.
• The light and dark variants are stored with clear names and documented color values, next to the master.

Gaps to resolve for your project

This guide does not verify menu commands for any specific application version, current browser support for dark-mode favicon techniques, or required favicon sizes. It also cannot tell you whether your brand guidelines already define a reversed logo. Check these points against your software, current browser documentation and the brand owner's rules before final delivery.