How to Use SVG for a Favicon

The short answer

To use SVG for a favicon, save a simplified version of your logo as a clean SVG file, place it on your site, and reference it in the page head with a link element whose rel is icon and whose type is image/svg+xml. Keep a raster fallback, usually an ICO or PNG file, alongside it, because not every browser or platform displays SVG favicons. The real design work is reducing your logo mark so it still reads when the browser draws it at tab size.

SVG (Scalable Vector Graphics) is an XML-based format that describes artwork as paths, shapes and fills rather than a fixed grid of pixels. A favicon is the small icon a browser shows in tabs, bookmarks and history lists. Because SVG is resolution-independent, one file can render sharply at different display densities, but that does not mean a full logo will stay legible when scaled down.

Step 1: Choose and simplify the artwork

Start from the logo mark or a single letterform, not the full lockup with wordmark and tagline. Text, thin strokes, fine gaps and small details tend to collapse into blur at favicon size. Treat the favicon as a separate, reduced version of the logo rather than a scaled copy.

• Use the symbol, monogram or initial instead of the full wordmark.
• Thicken strokes and widen counters (the enclosed or partly enclosed spaces inside letters and shapes) so they do not fill in.
• Remove gradients, shadows and textures unless they survive the reduction.
• Limit the palette to the few colours that carry brand recognition.
• Check contrast against both light and dark browser interfaces.

Confirm you have the right to use the logo before preparing it. Having an SVG file of a mark does not by itself grant permission to reuse it.

Step 2: Refine shapes against the pixel grid

Pixel grid refinement means adjusting vector geometry so that edges land on whole-pixel boundaries at the size the icon is most often displayed. When a straight edge falls halfway across a pixel, the renderer anti-aliases it into a soft grey line, which makes small icons look fuzzy.

• Set the artboard and viewBox to a simple square that matches a common display size, so one SVG unit maps to one pixel at that size.
• Snap horizontal and vertical edges to whole units, and size stroke widths so both sides of each stroke align to the grid.
• Convert strokes to filled outlines once they are final, so rendering does not depend on stroke settings.
• Preview at actual size and at the zoom levels and display densities your audience uses, then nudge points that still blur.
• Accept that curves and diagonals will always anti-alias; the aim is crisp straight edges and clear separation between shapes.

Grid alignment is a design recommendation, not a technical requirement of the format. A browser will display an unaligned SVG; it will simply look less sharp.

Step 3: Export a clean SVG

An .svg extension does not guarantee the file is pure vector. Editors can embed raster images, fonts or editor-specific metadata inside an SVG. Open the file in a text editor or inspect it in your design tool before publishing.

• Outline any text so the icon does not depend on installed fonts.
• Remove embedded bitmap images; if one is present, the result is not a true vector favicon.
• Strip editor metadata, hidden layers and unused definitions.
• Keep the viewBox attribute and the SVG namespace declaration on the root element; your editor's export normally adds the namespace.
• Avoid external references such as linked images or stylesheets, which browsers may not load for favicons.

A minimal favicon file can look like the example below. The namespace declaration is omitted here for brevity; keep the one your editor exports, because a standalone SVG file needs it to render.

<svg viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
  <path d="M9 8h6v16H9z M17 8h6v6h-6z" fill="#ffffff"/>
</svg>

Step 4: Optionally adapt to light and dark mode

An SVG favicon can contain an internal style block with a prefers-color-scheme media query, so the icon changes colour when the user's system is in dark mode. This is a capability of the format, but browser support for it in favicons varies, so treat it as an enhancement and make sure the default colours work on both backgrounds.

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #ffffff; }
  }
</style>

Step 5: Add the link tags with a fallback

Reference the SVG in the head of each page and keep a raster fallback. Browsers that support SVG favicons can use the SVG; others can fall back to the raster file. Many sites also provide a separate PNG for Apple home-screen icons, since that platform uses its own link relation.

<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">

File | Role

favicon.svg | Primary scalable icon for browsers that support SVG favicons

favicon.ico or PNG | Fallback for browsers and tools that do not use SVG

apple-touch-icon.png | Home-screen icon on Apple devices

Make sure your server delivers the SVG with the image/svg+xml content type; a wrong content type can stop the icon from appearing.

Step 6: Verify the result

• Open the site in each browser you support and check the tab icon, bookmarks and history.
• Toggle the system between light and dark mode to confirm contrast and any colour switching.
• Open the SVG file directly in a browser to confirm it renders on its own.
• Clear the cache or use a private window, since browsers cache favicons aggressively.
• Compare the icon side by side with other tabs at normal zoom to judge legibility.

Gaps to check yourself

No specific evidence was supplied on which browser versions currently support SVG favicons or dark-mode switching inside them, and no measured sizes are prescribed here beyond illustrative examples. Check current browser documentation for support details and the sizes your target platforms request before finalising your icon set.