Favicon und ICO in Base64

So wandeln Sie ein Favicon in Base64 um

1. Legen Sie favicon.ico, ein PNG oder ein SVG auf dem Feld ab oder wählen Sie die Datei über die Dateiauswahl.
2. Setzen Sie bei einem PNG Max. Breite auf 32 (oder 48), damit Sie nicht versehentlich ein App-Icon mit 512 Pixeln einbetten. ICO- und SVG-Dateien werden unverändert kodiert.
3. Ausgabe als steht auf Data-URI. Kopieren Sie sie und fügen Sie sie in das href ein:

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

Die Vorschau zeigt das Icon mit seiner Pixelgröße. So sehen Sie vor dem Einfügen, ob ein PNG wirklich 32×32 groß ist.

ICO, PNG oder SVG

Ein favicon.ico bündelt oft Bilder mit 16×16, 32×32 und 48×48 Pixeln, und alle landen im Base64. Das erklärt, warum die Zeichenkette länger ist als erwartet. Für einen Browser-Tab genügt meist ein einzelnes PNG mit 32×32.

SVG-Favicons können über eine Media Query prefers-color-scheme im SVG auf den Dark Mode reagieren. Behalten Sie ein PNG als Fallback, wenn Sie ältere Safari-Versionen unterstützen.

Wann sich ein eingebettetes Favicon lohnt

• HTML in einer einzigen Datei: exportierte Berichte, Offline-Dokumentation, ein als eine Datei gespeichertes Dashboard. Ein relativer Pfad zu favicon.ico zeigt ins Leere, sobald die Datei verschoben wird.
• Interne Tools und lokale Server, bei denen eine Route für statische Dateien mehr Arbeit macht als eine Zeile HTML.
• Dynamische Favicons: ein Benachrichtigungs-Badge oder eine Statusfarbe, auf ein Canvas gezeichnet und mit link.href = canvas.toDataURL("image/png") gesetzt.

Auf einer normalen Website ist eine separate Icon-Datei die bessere Wahl. Der Browser lädt sie einmal und speichert sie im Cache, während ein eingebettetes Favicon in jeder ausgelieferten HTML-Seite wiederholt wird.

Ein Favicon in JavaScript zeichnen

Für eine Statusanzeige brauchen Sie überhaupt keine Datei. Zeichnen Sie auf ein Canvas mit 32×32 Pixeln und weisen Sie die Data-URI dem vorhandenen Icon-Link zu:

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");

Wenn sich das Icon nicht ändert

• Das alte Icon wird weiter angezeigt. Browser cachen Favicons hartnäckig und getrennt von der Seite. Laden Sie ohne Cache neu oder öffnen Sie die Seite in einem privaten Fenster, um das neue zu sehen.
• Es erscheint gar nichts. Prüfen Sie, ob das href mit dem richtigen Typ beginnt: data:image/png;base64,, data:image/x-icon;base64, oder data:image/svg+xml;base64,. Ein SVG-Icon braucht außerdem das Attribut xmlns am Wurzelelement.
• Mehrere <link rel="icon">-Tags. Browser wählen anhand von Typ und Größe zwischen ihnen, ein eingebettetes Icon kann also gegen ein anderes deklariertes Icon verlieren. Entfernen Sie die, die Sie nicht wollen.

Zurück in eine Datei

Um aus einer Data-URI wieder ein favicon.ico zu machen, nutzen Sie Base64 in ICO. Für SVG-Icons kann SVG als Data-URI auch eine URL-kodierte Variante erzeugen, die oft kürzer ist als Base64.

Häufige Fragen