logoredraws.com

SVG Favicon Compatibility in Microsoft Edge

Does Microsoft Edge support SVG favicons? The Chromium-based browser does. Here is what that means for vector logo artwork, fallbacks and setup.

Published

Contents
  1. The short answer
  2. How the SVG favicon is declared
  3. What an SVG favicon does differently in Edge
  4. Why the artwork inside the SVG matters
  5. Where a raster fallback is still needed
  6. Checking that it works

The short answer

The current, Chromium-based version of Microsoft Edge supports SVG favicons. If a page declares an SVG icon with a link element of type image/svg+xml, Edge can render it in the browser tab the same way Google Chrome does, because both browsers share the same rendering engine. The original Edge, built on Microsoft's older EdgeHTML engine, did not support SVG favicons, so any guidance written for that browser is out of date.

The subject here is the small icon a website shows in the tab, bookmarks and history, delivered as an SVG file instead of the traditional ICO or PNG. This article does not draw on supplied test results, version-by-version measurements or vendor documentation. The points below rest on generally documented browser behavior, and site owners should confirm the result in the Edge builds their visitors actually use.

How the SVG favicon is declared

Edge looks for the icon in the page head. A common pattern lists the SVG first and keeps a raster fallback for browsers or surfaces that do not use SVG:

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

Edge chooses the SVG when it is declared with the correct type. The ICO file covers older browsers and tools that request a favicon from the site root by default. The server should send the SVG with the image/svg+xml content type, because a wrong content type can prevent the icon from displaying.

What an SVG favicon does differently in Edge

  • One file can scale cleanly to any size the browser requests, instead of a set of fixed-size raster files.
  • The SVG can contain a CSS prefers-color-scheme media query, so the icon can switch colors for light and dark browser themes. Chromium-based browsers, including Edge, respect this inside favicons.
  • A simple mark built from paths and basic shapes usually produces a smaller file than a multi-resolution ICO.

Why the artwork inside the SVG matters

The .svg extension does not guarantee that a favicon is true vector artwork. An SVG can contain real paths and shapes, or it can wrap an embedded PNG or JPEG in an image element. Edge will display either one, but an embedded raster image gains none of the scaling benefit and may look soft at larger sizes. Opening the file in a text editor or vector application shows which kind it is. Path and shape elements mean the artwork is vector. A base64 data string or a linked image file means the artwork is raster. Thumbnails in file browsers and design tools are raster previews of the file, not evidence of how it is built.

A full logo rarely works as a favicon. Fine type, thin strokes and detailed lockups become unreadable at tab size. A simplified symbol or monogram is usually prepared as a separate SVG, with text converted to outlines so the icon does not depend on fonts that are not installed on the viewer's system. Scripts and external references are best left out, because browsers render favicons in a restricted way and may ignore them.

Where a raster fallback is still needed

SVG support in the Edge tab does not cover every place an Edge user might see a site icon. Installed web apps and pinned shortcuts typically take their icons from a web app manifest, which usually lists PNG files at specific sizes. Other browsers, older systems and third-party services that fetch favicons may also expect ICO or PNG. Keeping a raster fallback alongside the SVG keeps the icon consistent across these surfaces. The supplied material did not document exactly which Edge surfaces use the SVG and which use raster files, so test any surface that matters to the site.

Checking that it works

Browsers cache favicons aggressively, so an updated icon may not appear right away in Edge. Changing the file name or adding a version query string to the href forces a fresh request. The Network panel in Edge's developer tools shows whether the SVG was requested and which content type the server returned. If the tab still shows an old or generic icon after that, the usual causes are a missing type attribute, an incorrect server content type or a malformed SVG.