Creating and Adding an SVG Favicon

The short answer

An SVG favicon is a site icon delivered as a Scalable Vector Graphics file instead of a fixed-size bitmap such as ICO or PNG. Because it is described with shapes rather than pixels, one file can render sharply at the small sizes used in browser tabs and at larger sizes on high-density screens. You add it to a page with a link element in the document head that declares the SVG type, and you keep a raster fallback for browsers and platforms that do not use SVG icons.

The vector format does not make a logo suitable on its own. A full logo that looks good on a business card often turns into an unreadable smudge at tab size, so the main design work is simplifying the mark and checking how its edges land on a small pixel grid.

How an SVG favicon differs from ICO and PNG

Format | How the image is stored | Practical role

SVG | Vector shapes, resolution-independent | Primary icon for browsers that support it; one file covers many sizes and can adapt to light or dark mode

ICO | One or more bitmaps in a single container | Broad legacy fallback, often requested automatically by browsers and tools

PNG | A single bitmap at a fixed size | Fallback icons and platform-specific icons such as home-screen shortcuts

In practice, the formats are complementary. SVG handles scaling and theming well, while raster files cover environments that ignore SVG icons or expect a specific bitmap size.

Check that the file is actually vector

A file ending in .svg is not proof of vector artwork. An SVG can wrap an embedded raster image, such as a base64-encoded PNG inside an image element, which scales no better than the original bitmap. It can also be a raster preview exported under an SVG name. Before using a file as a favicon, open it in a vector editor or a text editor and confirm that the logo is built from path, shape or similar vector elements rather than an embedded image.

Text needs the same check. A favicon cannot rely on the visitor having a particular font installed, so lettering in the mark should be converted to outlines before export. If the font license or the logo's usage terms are unclear, resolve them first. Being able to download a logo file does not by itself grant permission to modify the artwork, use its fonts or use the trademark as a site icon.

Preparing logo artwork for small sizes

• Choose a simplified mark: a symbol, monogram or single letter usually reads better than a full wordmark at tab size.
• Use a square canvas: set a square viewBox and center the mark so browsers do not crop or squash it.
• Remove fine detail: thin strokes, small counters, gradients and subtle textures tend to disappear or blur at small sizes.
• Favor strong contrast: the icon will appear on tab bars of different colors, so test it against both light and dark backgrounds.
• Align to the pixel grid: place key edges and stroke boundaries on whole units of a small grid so straight edges render crisply instead of blurring across two pixel rows.
• Clean up the export: remove editor metadata, hidden layers, unused definitions and unnecessary decimal precision to keep the file small and predictable.

Pixel grid refinement

Even though SVG is resolution-independent, it is still rasterized into pixels when displayed. At the smallest icon sizes, a vertical edge that falls halfway between two pixels is rendered as a soft gray column instead of a sharp line. Designing on a small grid that matches common favicon sizes, such as 16 or 32 units square, and snapping important edges to whole units reduces this effect. Thick, evenly weighted strokes survive this process better than hairlines.

Some designers keep a separately simplified version for the smallest sizes rather than scaling the main mark down. That is a design judgment rather than a requirement; the deciding factor is whether the icon is still recognizable when previewed at actual tab size.

A minimal SVG favicon with dark-mode support

An SVG favicon can include a style block with a prefers-color-scheme media query, which lets the icon change color when the visitor's system uses a dark theme. The example below shows the structure; a standalone SVG file should also carry the standard SVG namespace declaration on its root element, omitted here for brevity.

<svg viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #ffffff; }
    }
  </style>
  <rect class="mark" x="6" y="6" width="20" height="20" rx="4"/>
</svg>

Keep the file self-contained. External stylesheets, external fonts and scripts should not be relied on inside a favicon, because browsers load icons in a restricted way.

Adding the favicon to a page

Reference the SVG file with a link element in the head of the HTML document, declaring its type so browsers that understand SVG icons can select it. Add raster fallbacks alongside it.

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

• The SVG line provides the scalable, theme-aware icon for browsers that support it.
• The ICO line gives older browsers and tools a bitmap to use; the sizes value of any helps prevent some browsers from choosing the ICO over the SVG.
• The apple-touch-icon line supplies a PNG for Apple home-screen shortcuts, which use a raster image rather than the SVG favicon.
• Paths in the example are placeholders and should match where the files are actually served.

Testing and caching

Browsers cache favicons aggressively, so an updated icon may not appear right away. Testing in a private window, after a hard refresh, or with a changed file name helps confirm which file the browser is really using. Preview the icon in both light and dark themes and look at it at real tab size, not only zoomed in inside the design tool.

Gaps to verify

No specific browser-support figures, version numbers or test results were available for this article. Support for SVG favicons has historically varied across browsers, and some platforms have lagged behind others, so current behavior in each target browser should be checked against up-to-date compatibility data before relying on SVG alone. The raster fallbacks described above exist precisely to cover those gaps.