Favicon and ICO to Base64

How to convert a favicon to Base64

1. Drop favicon.ico, a PNG or an SVG on the box, or pick it with the file picker.
2. For a PNG, set Max width to 32 (or 48) so you do not inline a 512-pixel app icon by accident. ICO and SVG files are encoded as they are.
3. Output as is set to Data URI. Copy it and paste it into the href:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

The preview shows the icon with its pixel size, so you can see whether a PNG is really 32×32 before you paste it.

ICO, PNG or SVG

A favicon.ico often bundles 16×16, 32×32 and 48×48 images, and all of them end up in the Base64, which explains a string longer than you expected. Converting a single 32×32 PNG is usually enough for a browser tab.

SVG favicons can react to dark mode with a prefers-color-scheme media query inside the SVG. Keep a PNG as a fallback if you support older Safari.

When an inline favicon makes sense

• Single-file HTML: exported reports, offline docs, a dashboard saved as one file. A relative favicon.ico path would point nowhere once the file is moved.
• Internal tools and local servers where adding a static file route is more work than one line of HTML.
• Dynamic favicons: a notification badge or status color drawn on a canvas and applied with link.href = canvas.toDataURL("image/png").

On a normal website a separate icon file is the better choice. The browser fetches and caches it once, while an inline favicon is repeated in every HTML page you serve.

Drawing a favicon in JavaScript

For a status indicator you do not need a file at all. Draw on a 32×32 canvas and assign the data URI to the existing icon link:

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

When the icon does not change

• The old icon keeps showing. Browsers cache favicons hard and separately from the page. Reload without cache or open the page in a private window to see the new one.
• Nothing shows at all. Check that the href starts with the right type: data:image/png;base64,, data:image/x-icon;base64, or data:image/svg+xml;base64,. An SVG icon also needs the xmlns attribute on its root element.
• Several <link rel="icon"> tags. Browsers choose among them by type and size, so an inline icon may lose to another declared icon. Remove the ones you do not want.

Turning it back into a file

To get favicon.ico back from a data URI, use Base64 to ICO. For SVG icons, SVG to Data URI can also produce a URL-encoded version, which is often shorter than Base64.

FAQ