Embed a Base64 favicon

The short answer

Embedding a Base64 favicon means placing the icon's image data directly inside the page's HTML instead of pointing the browser to a separate icon file. The encoded image goes into the href attribute of a link element with rel set to icon, written as a data URI: a media type such as image/svg+xml or image/png, the marker base64, and then the encoded characters. The browser decodes that text and displays it as the tab or bookmark icon without fetching an additional file for it.

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...">

The string after base64, is shortened here. In practice it contains the entire encoded file, which for even a simple icon can run to hundreds or thousands of characters.

How it differs from a linked favicon file

With a conventional favicon, the HTML references a file such as an ICO, PNG or SVG stored on the server, and the browser requests it separately. That file can be cached once and reused across every page of the site. An embedded favicon removes that separate request but travels inside every HTML page that contains it, so it is downloaded again with each page that isn't already cached.

Approach | Separate request | Cached independently of the page | Size effect

Linked icon file | Yes | Yes | File size only

Base64 data URI | No | No, it is part of the HTML | Roughly one third larger than the original binary, because Base64 represents every 3 bytes as 4 characters

Percent-encoded SVG data URI | No | No, it is part of the HTML | Often smaller than Base64 for SVG, since the markup stays as readable text with only certain characters escaped

In editorial terms, embedding suits cases where a separate file is impractical: a single self-contained HTML document, an offline report, a prototype, a generated page, or an email-like artifact that must carry its own assets. For a multi-page website, a linked file is usually the more efficient default because the browser can cache it once. No performance measurements were supplied for this article, so any claim about speed gains or losses for a particular site would need to be tested on that site.

Encoding the icon

Any tool that converts a file to Base64 will do. On Linux with GNU coreutils, the following command prints the encoded file on a single line, which can then be pasted after the base64, prefix. Other systems use different flags for the same operation.

base64 -w 0 icon.svg

The media type in the data URI must match the actual file: image/svg+xml for SVG, image/png for PNG, and image/x-icon or image/vnd.microsoft.icon for ICO. A mismatch can cause the icon to be ignored.

What this means for an SVG logo

Base64 is only a text wrapper. It does not convert artwork into vectors or change what the file contains. If the SVG holds genuine vector paths, the embedded favicon stays vector and can scale cleanly. If the SVG is simply a container for a raster image, typically a PNG or JPEG embedded inside an image element, the favicon is still raster artwork despite the .svg extension. Opening the SVG in a text editor or vector application and checking for path, shape and image elements is the reliable way to tell; the filename and extension alone are not.

A full logo rarely works as a favicon unchanged. Favicons are commonly shown at very small sizes such as 16 and 32 pixels, where fine lines, small type and detailed lockups become illegible. A simplified mark, monogram or symbol drawn for small sizes usually reads better. Before encoding, it also helps to remove editor metadata, unused definitions and hidden layers from the SVG, because everything in the file ends up in every page.

Where SVG favicons are supported, the SVG can include a prefers-color-scheme media query in its internal styles to switch colors for light and dark browser interfaces. That works whether the SVG is linked or embedded, since the behavior lives inside the SVG itself.

Compatibility and caveats

• SVG favicon support is not uniform across browsers, so sites often supply a PNG or ICO alternative alongside the SVG; no current per-browser support data was supplied here, so check up-to-date compatibility tables before relying on SVG alone.
• Some browsers, crawlers and feed readers may still request a favicon.ico file from the site root regardless of what the HTML declares, so an embedded icon does not always eliminate that request.
• A Content Security Policy that does not permit data: sources for images can block an embedded favicon.
• Updating an embedded icon means changing the HTML of every page or template that contains it, rather than replacing one file.
• Large data URIs make HTML harder to read and review, which is a maintenance cost rather than a technical failure.

Rights when the artwork belongs to someone else

Being able to download a logo file does not by itself grant permission to simplify it, recolor it or publish it as a favicon. Modifying artwork, using any fonts it contains and displaying a trademark are separate questions governed by the owner's license terms or brand guidelines. For a company's own logo, the brand guidelines may already specify an approved small-size mark for favicons.

Gaps in the available evidence

No subject-specific evidence was supplied for this article: no browser version numbers, benchmark results or file-size comparisons for particular icons. The size overhead of Base64 stated above follows from how the encoding works; anything beyond that, including real-world loading impact and exact browser support, should be verified against current documentation and testing on the target site.