SVG Favicon via Data URI: How It Works and When to Use It

The short answer

An SVG favicon delivered through a data URI is a site icon whose SVG markup is written directly into the href attribute of the page's icon link element instead of being stored as a separate file. The value starts with the media type prefix data:image/svg+xml, followed either by URL-encoded SVG markup or by a base64-encoded version of it. The browser decodes that string and renders the vector icon in the tab without requesting a separate favicon file.

This is a delivery technique, not a different file format. The artwork is still an ordinary SVG document. What changes is where it lives: inline in every HTML page rather than at its own address on the server.

What the markup looks like

Below is a minimal pattern. The placeholder SVG-NAMESPACE stands for the standard SVG namespace string, which a standalone SVG used as an image must declare on its root element; it is omitted here only because this article does not reproduce addresses.

<link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,%3Csvg xmlns='SVG-NAMESPACE' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%230a6cff'/%3E%3C/svg%3E">

Readable, unencoded, the same icon is simply an svg element with a square viewBox containing one circle. The encoded form exists because certain characters would otherwise break the attribute value or be misread by the browser.

Encoding rules that matter

• Encode the hash sign as %23. Left raw, it is treated as the start of a fragment, so hex colors such as #0a6cff silently break the icon.
• Encode angle brackets as %3C and %3E. Some browsers tolerate them raw, but encoding avoids parsing surprises.
• Use single quotes inside the SVG when the href attribute itself is wrapped in double quotes, or encode the inner quotes.
• Remove line breaks and unnecessary whitespace, or encode them; a single-line string is the safest form.
• Choose URL encoding over base64 for SVG in most cases. Base64 represents every 3 bytes as 4 characters, adding roughly a third to the size, while URL-encoded SVG stays mostly readable and usually shorter. Base64 remains a valid option if a build tool or CMS mishandles special characters.

How it differs from a linked SVG or ICO favicon

Aspect | Data URI SVG | Linked SVG file | ICO or PNG file

Extra network request | None | One, then cached | One, then cached

Caching | Repeated inside every HTML page | Cached once as its own resource | Cached once as its own resource

Scaling | Vector, sharp at any size | Vector, sharp at any size | Fixed pixel sizes

Editing | Change the inline string in templates | Replace one file | Re-export each raster size

Pickup by tools outside the browser tab | Unreliable; many fetchers expect a crawlable file | Generally supported where SVG is accepted | Most widely recognized

In practice, the data URI approach suits small prototypes, single-file pages, internal tools, demos and environments where adding a separate static file is inconvenient. For a public production site, a linked file is usually the more robust primary option, because search engines, bookmark managers, and operating-system shortcuts may look for an icon they can fetch at a stable location rather than one buried in page markup.

Browser support and fallbacks

SVG favicons are supported in current Chromium-based browsers and Firefox. Safari's support has historically lagged and differed across versions, and no verified support matrix or version data was supplied for this article, so current behavior should be checked against up-to-date compatibility tables before relying on SVG alone.

• Keep a raster fallback, typically an ICO or PNG favicon, declared alongside the SVG icon.
• Provide a PNG apple-touch-icon for iOS home-screen shortcuts, which do not use the SVG favicon.
• If the site uses a Content Security Policy, make sure img-src permits data: sources, or the inline icon will be blocked.
• Test in each target browser; when several icon declarations are present, browsers choose among them by their own rules.

Preparing vector logo artwork for an inline favicon

A data URI favicon works only as well as the SVG inside it. The file extension alone does not prove the artwork is vector: an SVG can wrap an embedded raster image, typically an image element holding a base64 PNG or JPEG. Such a file will not scale cleanly and inflates the data URI. Inspect the markup and confirm the shapes are path, circle, rect, polygon or similar elements rather than an embedded bitmap.

• Simplify the mark. Full logos with wordmarks and fine detail rarely read at 16 or 32 pixels; a symbol, monogram or cropped element usually works better.
• Use a square viewBox so the icon is not letterboxed or distorted.
• Convert text to outlines. An SVG rendered as an image cannot load external fonts or other external resources, so live text falls back to a system font.
• Strip editor metadata, comments, hidden layers and unused definitions, then run the file through an SVG optimizer to shorten the string.
• Consider a prefers-color-scheme media query inside the SVG's style block to adjust colors for dark browser themes; support for this inside favicons varies, so treat it as an enhancement.

Rights and permissions

Being able to download a logo file does not grant permission to alter it, recolor it, crop it into a favicon or use it on a site. The artwork, any fonts it was built with, and the trademark itself may each carry separate terms. For an organization's own brand this is rarely an issue; for a client, partner or third-party logo, confirm the usage and modification rights before simplifying the mark into an icon.

Gaps in the available evidence

No subject-specific measurements, browser version data, performance tests or file-size comparisons were provided for this topic. The guidance above rests on general, documented behavior of data URIs, SVG and favicon declarations; exact support, size savings and crawler behavior should be confirmed for the specific browsers and services a site depends on.