Create a new favicon

The short answer

A new favicon is best built from a simplified version of your vector logo, drawn on a square artboard. That vector master produces two kinds of output: an SVG favicon for browsers that accept one, and raster files such as ICO and PNG for everything else. If the mark needs to stay visible on both light and dark browser interfaces, the SVG can carry its own dark mode variant through a color-scheme media query. You can also design a single mark that reads well on both backgrounds, which avoids relying on that feature at all.

No evidence specific to your brand, logo or target browsers was supplied for this article. The guidance below rests on general, verifiable principles of vector artwork and favicon delivery. Confirm current browser behavior against your own testing before you treat any approach as final.

Vector master versus delivered files

Separate the artwork you edit from the files you ship. The master should be true vector: paths and shapes you can scale and recolor. Most delivered favicon files are raster previews of that master, and only the SVG output stays vector. A file with an .svg or .ai extension can still contain an embedded raster image instead of paths. Open it and inspect the contents before you assume it is editable.

File | Type | Typical role

Vector master (AI, SVG, EPS or similar) | Vector, if built from paths | Editable source for every output

SVG favicon | Vector | Scalable icon for browsers that support SVG favicons; can include a dark mode rule

ICO | Raster container | Legacy fallback, commonly holding 16×16 and 32×32 images

Apple touch icon PNG | Raster | Home-screen icon on Apple devices, conventionally 180×180

Web app manifest PNGs | Raster | Install and launcher icons, commonly 192×192 and 512×512

Do you need a dark mode variant?

A dark variant matters when your mark is a dark shape on a transparent background, or a light shape on one. Such a mark can nearly vanish when the browser's tab strip or bookmarks bar switches color schemes. A mark with a solid background tile, or one with enough internal contrast to read on any background, usually needs no variant.

There are two main routes. The first is a single adaptive SVG whose fill colors change under a prefers-color-scheme media query. The second is a contrast-safe design, such as a filled tile or a contrasting outline, that works unchanged on both schemes. The adaptive SVG responds to the color scheme the browser reports, and that may not match the exact color of the surface the icon sits on. Raster fallbacks do not adapt at all. For those reasons, a contrast-safe design is the more predictable choice, and the adaptive SVG works better as a refinement on top of it.

Starting materials

• The vector logo source, with confirmed paths rather than an embedded image
• The brand's approved colors for light and dark contexts, if guidelines exist
• Permission to adapt the logo, especially if it belongs to a client or third party
• A vector editor that can export clean SVG and PNG at exact pixel sizes
• A tool that can package multiple PNG sizes into an ICO file

How to produce the favicon

1. Reduce the logo to a favicon mark

At 16 pixels, wordmarks, taglines and fine detail become unreadable. Choose the most distinctive element instead: a symbol, monogram or single letter. Thicken thin strokes, open up tight gaps and remove ornamentation that will blur at small sizes. Viewing the mark at actual size while you work is the quickest way to judge legibility.

2. Build clean paths on a square artboard

Place the mark on a square artboard with a small, consistent margin. Convert any text to outlines so the result does not depend on installed fonts. Check the font license first, because outlining and redistributing letterforms may be restricted. Convert strokes to filled shapes, merge overlapping shapes where practical, and remove hidden or empty objects. Align key edges to the pixel grid at 16 and 32 pixels so the raster exports render sharply.

3. Define the light and dark colors

Choose fill colors that hold contrast against both a light and a dark interface. For an adaptive SVG, assign fills through a class and override them inside a dark-scheme media query. The example below shows the structure only. The colors and the square path are placeholders, not recommendations. As a standalone file, 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>

Keep the style rules inside the SVG itself. A favicon is loaded as a standalone image, so the page's stylesheet cannot reach it.

4. Export the files

Export the SVG with editor metadata, comments and unused definitions stripped out. Then export PNGs from the master at each required pixel size. Exporting at each size directly gives sharper results than downscaling one large image. Package the 16 and 32 pixel PNGs into an ICO file. Raster files cannot switch colors, so choose a fallback version that reads acceptably on both light and dark interfaces, such as the mark on a solid tile.

5. Declare the icons in the page head

• Reference the SVG favicon with the type image/svg+xml
• Reference the ICO file as a fallback for browsers that do not use SVG favicons
• Reference the 180×180 PNG as the Apple touch icon
• List the larger PNGs in the web app manifest if the site is installable

Some browsers also accept separate icon declarations with a media condition for the color scheme. Support for that approach has been inconsistent, so test it before relying on it.

Final inspection

• Open the SVG in a text editor and confirm it contains path data, not an embedded raster image
• Confirm no live text or font references remain in the SVG
• View the icon at 16 and 32 pixels on both light and dark tab and bookmark backgrounds
• Switch the operating system or browser color scheme and check whether the SVG variant changes as intended
• Check that the ICO and PNG fallbacks stay legible on both schemes
• Clear the browser cache, or test in a fresh profile, because browsers cache favicons aggressively
• Test in each browser your audience uses, since support for SVG favicons and color-scheme rules varies

Rights and permissions

Being able to download a logo file is not permission to modify it or use it. A favicon is a modified rendition of a logo, and a dark mode variant changes its colors further. If the logo belongs to a client or another organization, confirm that its brand guidelines or an agreement allow these adaptations. Trademark rights, artwork ownership and font licensing are separate questions, and each may need its own clearance.

Gaps in this guidance

No subject-specific evidence was available. That includes current browser support data, a particular logo or brand guidelines, and measured contrast results. The file sizes listed are common conventions, not requirements confirmed for your project. Verify them, and the dark mode behavior, against current browser documentation and your own testing.