How to Embed a Favicon in HTML with a Data URI

The short answer

You can embed a favicon directly in the page by putting the whole image inside the href of a link element in the document head, using a data URI instead of a file path. For an SVG icon, the URI starts with data:image/svg+xml, followed by the SVG markup. It must be either percent-encoded or base64-encoded. No separate icon file or extra request is needed for that icon. However, browser support for SVG favicons varies, and some browsers still look for a root-level favicon.ico. A raster fallback is therefore still advisable.

This article covers the markup, the encoding rules that most often break inline icons, and the order of checks when the icon does not appear. It also explains how to confirm that the SVG you are embedding is real vector artwork. No specific logo file was supplied with this request. The guidance is therefore general and cannot assess any particular icon's construction or legibility.

Basic markup for an inline SVG favicon

Start with a small, square SVG. A viewBox of equal width and height keeps the icon from being stretched or letterboxed. The example below uses a placeholder for the namespace attribute. Replace it with the standard SVG namespace URI, which appears at the top of any SVG exported from a vector editor. Browsers will not render an SVG supplied as an image without it.

<svg xmlns="[standard SVG namespace URI]" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1a73e8"/>
</svg>

To inline it, collapse the SVG to one line and switch its attribute quotes to single quotes, because the href itself uses double quotes. Then percent-encode the characters that would break the URI. The result goes into a link element in the head:

<link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,%3Csvg xmlns='[standard SVG namespace URI]' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a73e8'/%3E%3C/svg%3E">

Encoding rules that matter

Most broken inline favicons come down to encoding. The characters below are the usual culprits in percent-encoded SVG.

Character | Encode as | Why

| %23 | Otherwise it starts a URI fragment, and everything after it, such as the rest of a hex color, is dropped

% | %25 | A literal percent sign would be read as the start of an escape sequence

< and > | %3C and %3E | Often tolerated, but encoding them avoids parser and validator problems

" (double quote) | Use single quotes in the SVG, or %22 | An unescaped double quote ends the href attribute early

Line breaks | Remove, or encode | Keeps the URI on one clean line

The alternative is base64. Encode the entire SVG and declare it with ;base64 before the comma. Base64 avoids character-by-character escaping, but it makes the string larger and unreadable when you are debugging. Percent-encoding is usually more compact for SVG and lets you edit colors in place.

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,<base64-encoded SVG>">

Adding a fallback

Support for SVG favicons depends on the browser and its version. Check current compatibility data for the browsers you target, rather than assuming universal support. A common pattern is to declare a raster icon alongside the SVG. That raster icon can also be inlined as a base64 PNG data URI. Keeping a favicon.ico at the site root also covers clients that request it automatically. Which declared icon a browser picks when several are present is not consistent across browsers, so test the combination you ship.

<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,<base64-encoded PNG>">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<percent-encoded SVG>">

Optional: light and dark variants in one inline SVG

An SVG favicon can carry its own style block with a prefers-color-scheme media query. This lets the icon adapt to the browser's color scheme without a second file. Whether a given browser applies this query inside a favicon is something to verify in the browsers you support. Remember that every # in the colors must become %23 once the SVG is placed in a percent-encoded data URI.

<svg xmlns="[standard SVG namespace URI]" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a73e8; }
    @media (prefers-color-scheme: dark) { rect { fill: #8ab4f8; } }
  </style>
  <rect width="32" height="32" rx="6"/>
</svg>

When inlining is and is not a good fit

Inlining suits small, simple icons. It works well for single-file HTML documents, prototypes, offline pages, and generated reports where a separate asset is inconvenient. The trade-off is caching. A favicon file can be cached once and reused across pages. An inline icon is repeated in every HTML document that contains it, which adds to each page's weight. For a large site with many pages, or a complex logo with many paths, a separate file is usually the better choice.

Order of checks when the inline favicon does not appear

• 1. Placement and syntax: confirm the link element is inside the head and uses rel="icon", and that the href attribute is not cut short by an unescaped double quote.
• 2. Encoding: look for raw # characters (especially in hex colors), raw % signs, and stray line breaks. Encode them as described above.
• 3. Decoding test: paste the data URI on its own into a browser's address bar. If the image does not render there, the problem is in the SVG or its encoding, not in the HTML.
• 4. Namespace: make sure the svg element declares the standard SVG namespace. Without it, the markup is not treated as an SVG image.
• 5. Content Security Policy: if the site sends a CSP, its img-src directive must allow data: sources. Otherwise the icon is blocked; the browser console usually reports this.
• 6. Competing declarations: other icon link elements, or a root-level favicon.ico, may be chosen instead of your inline icon.
• 7. Cached icons: browsers cache favicons persistently, so an old icon can survive a normal reload. Test in a private window or a fresh profile.
• 8. Browser support: if the SVG works in one browser but not another, the second browser may not support SVG favicons. Rely on the raster fallback there.

Confirming the SVG is genuinely vector

A .svg extension or a crisp preview does not prove that an icon is vector artwork. Open the file in a text editor and inspect what it actually contains. This is an observable check, separate from any visual judgment about how the icon looks.

• Paths and shapes: elements such as path, rect, circle and polygon are true vector geometry and scale cleanly.
• Live text: a text element depends on fonts available on the viewer's system. An inline favicon cannot rely on your installed fonts, so the glyphs may render differently or fall back to another typeface. Converting text to outlines removes this dependency. Emoji drawn as text also vary by platform.
• Embedded raster: an image element with a base64 PNG or JPEG inside means the icon is a bitmap wrapped in SVG. It will not scale like vector artwork, and it inflates the data URI.
• Editor leftovers: metadata, editor-specific namespaces, hidden layers and comments add length without changing the image. They are worth removing before inlining.

Whether the icon reads well at the very small sizes a browser tab uses is a visual judgment, not a file property. Fine detail, thin strokes and small lettering in a full logo often disappear at that scale. Many favicons therefore use a simplified mark rather than the complete logo. Judge this by viewing the icon at its actual rendered size.

Permission to use the logo

Having a logo file does not grant permission to use it or alter it. Simplifying, recoloring or cropping a logo to make a favicon is a modification. If the mark belongs to a client, an employer or a third party, confirm that its use and any changes are authorized under the applicable brand guidelines or agreement.

What would need more information

The steps above are enough to embed and debug an inline favicon in general. Some questions need more context. These include whether a particular logo is built from paths or contains embedded raster or live text, whether it stays legible at tab size, and which browsers a specific project must support. Answering them requires the actual SVG file, the target browser list, and the site's security headers.