How to create an SVG favicon

11 min read

An SVG favicon is the best default icon for a modern website: one small, scalable file that stays sharp in a 16-pixel browser tab, on a high-density display and anywhere else a browser chooses to render it larger. It is also the only favicon format that can adapt itself to dark mode.

Creating one well takes a little more than exporting a logo with an .svg extension. The file must be completely self-contained, the artwork must survive being shrunk to favicon size, and — because not every platform uses SVG favicons — it still needs a small set of raster fallbacks behind it. This guide covers the whole job: making the SVG, adding a dark variant, starting from a PNG when you have no vector logo, installing the result, and testing it where visitors will actually see it.

What an SVG favicon can and cannot do

SVG is a vector format: it describes shapes, paths and colours rather than a fixed grid of pixels. The browser renders those shapes at whatever size the tab, bookmark bar or shortcut needs, so a single file replaces the pile of 16, 32 and 48-pixel exports that raster favicons used to require. Chrome, Edge, Firefox and Opera all support SVG favicons and will prefer yours when you declare it, and so does Safari since version 26 (September 2025).

Two limits shape everything below. First, support is not universal: Safari 18 and earlier do not use SVG favicons in tabs, Google Search does not list SVG among its supported favicon formats, iOS home screen icons come from a PNG, and Android reads its icons from a web app manifest. An SVG-only site will look finished in Chrome and unfinished elsewhere — the fix is the fallback stack in the installation step, not a bigger SVG. Second, a favicon is loaded as an image, isolated from your page. Scripts in the file never run, and external resources — web fonts, linked images, external stylesheets — are not fetched. Anything the artwork needs must live inside the one file.

Step 1: Start with a simplified, square mark

Favicons are read at 16×16 pixels, and no export setting rescues artwork that only makes sense at poster size. Before creating any file, simplify:

  • Use a square canvas. Draw on a square artboard with a matching viewBox (for example 0 0 64 64). Non-square logos should be centred with breathing room, not stretched.
  • Keep one recognisable silhouette. Drop taglines, fine lines, tiny counters and detail that merges into noise at 16 pixels. If your full logo has a compact symbol or monogram, that — not the whole lockup — is usually the favicon.
  • Mind the edges. A small margin keeps the mark from touching the tab edges and survives the rounded or circular masks some platforms apply. Fill that margin with a deliberate background if your mark would otherwise float, low-contrast, on an unknown tab colour.
  • Check contrast on both themes. The icon sits on light and dark browser chrome. A dark navy mark on transparency can vanish in a dark tab even before dark mode enters the picture; a background of its own, or the dark variant in step 4, solves it properly.

Judge every decision at actual size. Shrink a preview to 16×16 and look at that, not at the 512-pixel master — if the shape is not recognisable there, simplify further.

Step 2: Create the file — by hand, from a design tool, or with a generator

Option A: Write or export true vector artwork

If your logo exists as vectors, this is the highest-quality route. You can hand-write a simple mark — many favicons are a rounded square and a letterform — or export from Figma, Illustrator or Inkscape. A clean, minimal result looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="14" fill="#1e3a8a"/>
  <path d="M22 46V18h17a9 9 0 0 1 0 18H29" fill="none"
        stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>
</svg>

Whatever tool you use, clean the export up before shipping it:

  • Keep the viewBox, drop fixed dimensions. Remove exported width/height attributes (or make sure they are square and match the viewBox) so the browser scales the icon freely.
  • Convert text to outlines. Fonts are not loaded in favicon context, so live text would fall back to a default font or disappear. Outlined lettering renders identically everywhere.
  • Expand strokes and flatten where needed. Turning strokes into filled paths makes rendering consistent across browsers and stops thin strokes being scaled unpredictably — and at favicon sizes, prefer bolder strokes anyway.
  • Delete the cruft. Hidden layers, unused defs, editor metadata and comments only add bytes. Many tools have an optimised or "for web" export; use it, then open the file and confirm it is still valid, well-formed XML.
  • Embed, never link. If the artwork includes a raster image or a pattern, it must be embedded inside the SVG (typically as a data URI). A reference to an external file will simply not load.

Option B: Use a generator and skip the hand-editing

If you would rather not clean up SVG markup yourself, EasyFaviconGenerator produces the icon for you. Start from an SVG logo and it keeps the vector artwork; start from a picture and it builds the favicon package around it. In the editor you can add a plain background and margins, adjust brightness, preview the result in light and dark browser tabs and in Google search results, and define a separate dark-theme icon — then download the SVG together with every fallback file and the matching HTML, all generated in your browser.

Step 3: Add a dark-mode variant inside the SVG

This is the feature no raster format can match. Because the SVG is self-contained, the theme switch has to live inside the file too, as a small <style> block using the same media query you know from CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    .dark { display: none; }
    @media (prefers-color-scheme: dark) {
      .light { display: none; }
      .dark { display: inline; }
    }
  </style>
  <g class="light">
    <rect width="64" height="64" rx="14" fill="#ffffff"/>
    <path d="M22 46V18h17a9 9 0 0 1 0 18H29" fill="none"
          stroke="#1e3a8a" stroke-width="6" stroke-linecap="round"/>
  </g>
  <g class="dark">
    <rect width="64" height="64" rx="14" fill="#172554"/>
    <path d="M22 46V18h17a9 9 0 0 1 0 18H29" fill="none"
          stroke="#bfdbfe" stroke-width="6" stroke-linecap="round"/>
  </g>
</svg>

The light artwork is the default; when the visitor's system or browser theme prefers dark, the query hides it and shows the dark group instead. Draw both variants on the same canvas and keep the same silhouette — change colours, brightness and background, not the concept, so the icon is recognisable as the same site when the theme flips. Resist simply inverting the colours: inversion turns brand blues into odd oranges and makes shadows look dirty. Raise the foreground to a paler tint, give the dark variant its own background if it needs one, and if anything make strokes slightly bolder, because light-on-dark shapes visually swell and fine detail clogs.

One expectation to set correctly: the icon follows the operating system or browser theme, because that is all an image-context SVG can see. A light/dark toggle on your own website — a class on <html>, a stored preference — cannot reach the favicon, and that is right: the icon sits in the browser's chrome, next to the browser's own UI. Our dedicated guide to SVG favicons and dark mode goes deeper, including the separate-files alternative and how to design the dark artwork. If you generate the icon here, the editor's Dark icon panel builds exactly this two-group file for you, from either an adjusted copy of your regular icon or a dedicated dark artwork you supply.

Step 4: If your logo is a PNG, know what "converting" really does

Uploading a PNG and downloading an SVG does not turn pixels into vectors. What a generator (ours included) does is wrap the raster image inside an SVG container, embedded as data. That file is genuinely useful — browsers accept it, it can carry a dark-mode variant, and it completes the package — but the artwork inside is still a bitmap, so it will soften when scaled up exactly as the original would.

Practical consequences:

  • Start from at least 512×512 pixels. Scaling a large source down is clean; enlarging a 64-pixel logo invents blur, in SVG wrapping just as much as anywhere else.
  • For a truly crisp icon, redraw or trace. If your logo is simple flat shapes, tracing it (or redrawing it in a vector tool) produces real paths that stay sharp at every size. Check the traced result at 16 pixels — automatic tracing of detailed logos often adds wobbly edges and a much larger file, and photographs or gradients should stay raster rather than be traced at all.
  • A dark version still works. The dark variant can be a second, brighter-adjusted or dedicated image swapped in by the same media query, even when both are embedded rasters.

Step 5: Install the SVG with its fallback stack

Save the file as favicon.svg, put it in your site root, and declare it in the <head> of every page — together with the fallbacks that cover the platforms SVG does not reach. This is the package EasyFaviconGenerator produces:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Each line earns its place:

  • favicon.svg — the main icon for Chrome, Edge, Firefox and Opera, and the only one that adapts to dark mode. Serve it as image/svg+xml; a file served with the wrong content type can be rejected even when the markup is right.
  • favicon-96x96.png — the fallback for browsers without SVG favicon support, and a raster size Google accepts for search results (a square icon, ideally larger than 48x48 pixels, in a format such as PNG or ICO; Google does not list SVG as supported). As a fixed image that cannot switch themes, design it to survive both light and dark result pages — a mid-tone background of its own beats transparency.
  • favicon.ico — keep a small multi-size ICO at the site root. Tools, legacy browsers and browsers displaying a PDF or image directly (pages with no HTML to read) request /favicon.ico by convention.
  • apple-touch-icon.png — the opaque 180×180 icon iOS uses for home screen shortcuts. Opaque matters: iOS fills transparency with black.
  • The manifest icons — 192×192 and 512×512 PNGs declared in site.webmanifest for Android home screens and install prompts, with the important artwork kept inside the central maskable safe zone.

Our favicon sizes and formats cheat sheet explains each file in more depth, and the compatibility matrix records which icon each browser and platform actually uses.

Step 6: Test it like a visitor, then beat the cache

  • Open the file directly. Load /favicon.svg in a tab: it should render standalone, with no missing-font or missing-image surprises. Toggle your operating system between light and dark and hard-refresh (Ctrl+F5) — a dark-aware icon visibly switches.
  • Shrink it. Confirm the icon at 16×16 in both themes, in a real browser tab, not just in your design tool.
  • Check the fallbacks, not just the SVG. Open the site in Safari (the SVG shows in Safari 26+, the PNG/ICO in older versions) and confirm the icon looks right, and add the site to an iOS and an Android home screen to see the touch and manifest icons.
  • Run the live site through a checker. The favicon checker fetches every declared icon, validates formats and sizes, inspects the manifest, and previews the result in browser tabs and search results.
  • Expect caching to fight you. Browsers cache favicons aggressively and separately from the page, so an unchanged tab usually means a stale cache, not a failed upload. Test in a private window, and when you replace an icon, version the URL (/favicon.svg?v=2) — the generator can append a version for you. Google refreshes search-result favicons on its own schedule over days, so judge that surface later, and keep the URL stable once it is live.

Quick answers

Can I ship only an SVG favicon?

For a controlled audience on one modern browser, yes. On the public web, no: Safari 18 and earlier, Google Search, iOS and Android home screens, some search surfaces and root-level /favicon.ico requests would all fall back to improvisation. The fallback files are a few kilobytes — ship them.

Does my SVG need a width and height?

No. A square viewBox is what matters; without fixed dimensions the browser renders the icon at exactly the size each surface requests. If your export includes dimensions, make sure they are square and agree with the viewBox.

Can an SVG favicon be animated or interactive?

Do not rely on it. In image context, scripts never run and interaction is impossible, and animation support is inconsistent — some browsers show a static frame instead. Design a static icon that works on its first frame, because that may be all anyone sees.

Why does my dark-mode favicon not follow my website's theme toggle?

Because it cannot see it. The SVG responds to prefers-color-scheme as reported by the browser and operating system, which is the theme of the browser chrome the icon lives in. That is the intended behaviour, not a bug.

Creating the file vs making it theme-aware

This post covers creating and installing an SVG favicon end to end. If your SVG already works and you only need the dark variant, the media-query design choices and separate-files alternative are in SVG favicons and dark mode. If the icon renders but disappears on dark tabs, start there rather than re-exporting the artwork.

The short version

Create a simplified, square mark; export or generate a self-contained SVG with a clean viewBox, outlined text and nothing external; add a prefers-color-scheme variant so the same file survives dark tabs; and install it alongside the 96×96 PNG, root ICO, Apple Touch icon and manifest icons that cover Safari and phones. Then test at 16 pixels, in both themes, on the live site. Create your SVG favicon and preview it in light and dark tabs before you download a thing.

All favicon articles