How to Create a Favicon for Your Website, Including Dark Mode Variants

The short answer

To create a favicon, reduce your logo to a simple symbol that reads at tab size and build it on a square artboard with clean, outlined vector paths. Export it as an SVG with an ICO and PNG fallback, then reference those files in the head of your site's HTML. For dark mode you have two choices. The first is one design that stays legible on both light and dark tab backgrounds. The second is an SVG favicon that switches colors with a CSS media query. The fallback formats cannot switch, so they need a design that works on both backgrounds either way.

A few terms used in this guide:
A favicon is the small icon browsers show in tabs, bookmarks, history and some search interfaces.
A vector file describes shapes as mathematical paths rather than pixels, so it scales without blurring.
The artboard is the canvas area in your design application that becomes the exported image's boundaries.
The viewBox is the SVG attribute that defines that coordinate space in the exported file.

Before you start

• A master logo file that you have the right to adapt. A file extension alone does not prove permission to reuse a logo.
• Confirmation that the master really contains vector paths. An SVG, EPS, AI or PDF file can wrap an embedded raster image, so open it and check that the shapes are editable paths and not a placed bitmap.
• A vector editor that can export SVG and PNG, plus a way to produce an ICO file. Some editors do this natively; otherwise use a dedicated converter.
• Access to the site's HTML head, or to the favicon setting in your site builder or CMS.

Step 1: Simplify the mark for small sizes

A full logo with a wordmark and tagline rarely survives being shrunk to tab size. Start from the most recognizable element instead: the symbol, a monogram, or the first letter of the wordmark. Remove fine details, thin strokes, small counters and gradients that turn into mush when rendered with very few pixels. If the brand guidelines include an approved compact mark or app icon, use that rather than inventing a new reduction.

Test early. Zoom the artboard out to roughly actual tab size, or export a quick small PNG, and look at it next to other tabs. If you can't identify the mark at a glance, simplify further.

Step 2: Set up a square artboard and grid

Create a square artboard. Working on a small whole-number grid, for example 32 by 32 units, makes it easier to align edges to whole units. Shapes aligned this way render with crisper edges when the browser rasterizes them at small sizes. This is a design practice rather than a requirement. Center the mark and leave consistent padding so it doesn't touch the edges, but don't shrink it so much that the tab icon looks undersized.

Step 3: Clean up paths and typography

• Convert any live text to outlines, also called creating outlines or converting to paths. This removes the dependency on installed fonts, which an SVG favicon cannot rely on.
• Expand strokes into filled shapes so line weight doesn't change unexpectedly when the file is scaled or rendered by different engines.
• Unite overlapping shapes that share a color, and use compound paths where a shape has holes, such as the counter of a letter. A compound path is one path object made of several subpaths, where inner subpaths cut out of outer ones.
• Delete hidden objects, empty groups, unused layers, clipping masks you no longer need and stray anchor points.
• Keep the color count low, ideally one or two flat colors.

Menu names for outlining text, expanding strokes and merging shapes differ between applications and can change between versions. Check your editor's documentation for the version you use instead of relying on a specific command name.

Step 4: Decide how the favicon handles dark mode

In a dark browser theme, the tab background is dark. A favicon drawn as a dark mark on a transparent background can disappear against it, and a light mark has the same problem in light themes. Preview the mark on both a light and a dark background before choosing a strategy.

Strategy | How it works | Trade-off

Contained tile | The mark sits on a solid square or rounded-square background shape, so it carries its own contrast | Works in every format, including ICO and PNG, but changes the silhouette of the mark

Outlined or two-tone mark | A contrasting outline or second color keeps the edges visible on either background | No extra files needed, but can add visual noise at small sizes

Adaptive SVG | A media query inside the SVG swaps fill colors when the user's system or browser prefers a dark scheme | The cleanest result where supported, but browser support varies and fallbacks cannot adapt

A practical recommendation is to combine them. Make the ICO and PNG fallbacks legible on both backgrounds, typically with a contained tile. Then add an adaptive SVG for browsers that support it.

Step 5: Export the SVG favicon

Export the artboard as SVG. Use settings that keep a viewBox, write fills as presentation attributes or a small style block, and avoid embedding raster images or font data. Afterwards, open the file in a text editor and remove editor metadata, comments and unused definitions. Optimization tools can do this, but review their output so they don't merge or remove the class names your dark mode styles depend on.

To make the SVG adapt to dark mode, add a style block with a prefers-color-scheme media query. In the example below, the colors are placeholders for your brand colors and the path data is shortened. Keep the namespace attribute your editor writes on the root svg element; it is omitted here.

<svg viewBox="0 0 32 32">
  <style>
    .tile { fill: #1a1a1a; }
    .mark { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .tile { fill: #ffffff; }
      .mark { fill: #1a1a1a; }
    }
  </style>
  <rect class="tile" width="32" height="32" rx="6"/>
  <path class="mark" d="M8 8h16v16H8z"/>
</svg>

This media query reacts to the color scheme preference reported by the user's browser or operating system. It does not react to a light or dark toggle built into your own site, because the favicon is rendered separately from your page's styles.

Step 6: Export raster fallbacks

Not every browser or platform uses an SVG favicon, so also produce raster versions from the same artwork.

• An ICO file containing small square sizes. The 16 and 32 pixel sizes are a common convention for tab and bookmark icons. An ICO file can hold several sizes in one file.
• A PNG for Apple devices, used when someone saves your site to a home screen. A 180 by 180 pixel square is the widely used size. Give it an opaque background instead of transparency, because transparent areas may be filled with an unintended color.
• Optionally, larger PNGs listed in a web app manifest if your site should be installable as a progressive web app.

Check the smallest exports at 100 percent zoom. If edges look soft, nudge shapes onto whole grid units in the vector master and export again. Don't sharpen the PNGs by hand, because the master and the exports would then drift apart. The size conventions above are widely used, but platforms update their requirements, so confirm them against current browser and platform documentation before relying on them.

Step 7: Add the favicon to your site

Upload the files to your site, commonly at the root directory, and reference them inside the head element. The filenames below are placeholders; match them to your actual file names and locations.

<link rel="icon" href="favicon.ico">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

Include the manifest line only if you created a manifest file. If you use a site builder or CMS, look for its site icon or favicon setting instead of editing HTML directly. Some platforms accept only a single raster image and generate the other sizes themselves, which means an adaptive SVG may not be possible there.

How to confirm the result

• Open the site in a fresh private window. Browsers cache favicons aggressively, so a normal reload may keep showing the old icon.
• Switch your operating system or browser between light and dark themes and confirm the icon stays visible in both. If you used an adaptive SVG, confirm the colors actually swap.
• Test in each browser your audience uses. Support for SVG favicons and for the dark mode media query differs between browsers, and some will show the ICO or PNG fallback instead.
• Open each favicon file address directly in the browser to confirm it loads and isn't returning an error page.
• Bookmark the page and check the bookmark icon. On a phone, add the site to the home screen to check the Apple touch icon.
• Use your browser's developer tools to confirm the link elements are present in the delivered HTML and that no older favicon tag earlier in the head overrides them.

Gaps to check for your setup

This guide is not tied to a specific design application, CMS or browser version. Before finalizing, check three things against current documentation for your exact setup: which browsers honor SVG favicons and the prefers-color-scheme query, the icon sizes your target platforms request, and the export commands in your version of your editor. Search engines may also display favicons in results under their own guidelines, so review those separately if search appearance matters to you.