Creating Favicons with Data URIs

Data URI Favicons

Favicons can be specified as data URIs in the <link> tag, eliminating the need for a separate favicon.ico file request. This is particularly useful for single-page applications, documentation sites, and quick prototypes.

Basic Implementation

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

For SVG favicons (modern browsers):

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%94%A7%3C/text%3E%3C/svg%3E" />

The SVG emoji favicon trick is a popular way to create a favicon without any image file:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛠</text></svg>" />

Dynamic Favicons with JavaScript

Data URIs enable dynamic favicons that change based on application state:

function setFavicon(emoji) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${emoji}</text></svg>`;
  const link = document.querySelector("link[rel='icon']");
  link.href = "data:image/svg+xml," + encodeURIComponent(svg);
}

// Show notification count in favicon
setFavicon("🔴");

Canvas-Generated Favicons

For more complex dynamic favicons, use Canvas to generate a PNG data URI:

const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3b82f6';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();

const link = document.querySelector("link[rel='icon']");
link.href = canvas.toDataURL('image/png');

Browser Support

All modern browsers support data URI favicons. Safari requires the type attribute for non-ICO formats. For maximum compatibility, provide both SVG (data URI) and a traditional .ico fallback.