Anleitung
- Legen Sie eine .ico-Datei auf dem Ablagebereich ab, klicken Sie darauf, um eine Datei auszuwählen, oder fügen Sie ein Bild ein.
- Belassen Sie „Konvertieren in“ auf „Original beibehalten“, damit alle im Symbol gespeicherten Größen in der Ausgabe enthalten bleiben.
- Prüfen Sie die kodierte Größe; ein Symbol mit vielen Größen kann größer sein, als Sie erwarten.
- Kopieren Sie die Data-URI für einen Favicon-Link-Tag, oder kopieren Sie die Ausgabe als img-Tag, CSS oder Markdown.
Das ICO-Format
ICO ist das Symbolformat von Windows und das ursprüngliche Favicon-Format. Es ist ein Container: Ein kurzes Verzeichnis listet ein oder mehrere Bilder mit Breite, Höhe und Farbtiefe auf, und jedes Bild ist als Bitmap-Daten oder, bei großen Formaten wie 256 × 256, als eingebettetes PNG gespeichert. Eine typische favicon.ico enthält Versionen mit 16, 32 und 48 Pixeln, damit der Browser die schärfste auswählen kann.
Der registrierte MIME-Typ ist image/vnd.microsoft.icon, image/x-icon ist jedoch weitaus verbreiteter, und Browser akzeptieren beide. ICO-Daten beginnen in Base64 mit AAABAA, dem kodierten Dateiheader.
Ein Favicon als Data-URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Ein eingebettetes Favicon ist praktisch für HTML-Dokumente in einer einzigen Datei, etwa exportierte Berichte, lokal gespeicherte Dashboards und Offline-Dokumentation, sowie für Prototypen oder interne Tools, bei denen Sie keine separate Datei bereitstellen möchten. Auf einer Website mit vielen Seiten ist eine normale /favicon.ico meist besser: Sie wird einmal heruntergeladen und zwischengespeichert, während eine Data-URI in jeder HTML-Antwort erneut enthalten ist.
Wenn Sie überhaupt kein Symbol möchten, verhindert <link rel="icon" href="data:,">, dass der Browser /favicon.ico anfordert.
Favicons als ICO, PNG oder SVG
Aktuelle Browser akzeptieren auch PNG- und SVG-Favicons, zum Beispiel <link rel="icon" type="image/png" href="data:image/png;base64,...">. Ein einzelnes PNG mit 32 × 32 Pixeln ist oft kleiner als eine ICO-Datei mit mehreren Größen; verwenden Sie dafür PNG zu Base64 oder SVG zu Base64.
Wenn Sie hier eine ICO-Datei in PNG, JPEG oder WebP konvertieren, bleibt nur ein Bild erhalten, nämlich das, das der Browser zur Anzeige auswählt. Für den umgekehrten Weg, also zum Erstellen einer ICO-Datei, kodieren Sie ein PNG und fügen das Ergebnis in Base64 zu ICO ein. Das Tool schreibt Symbole von 16 bis 256 Pixeln.
Häufig gestellte Fragen
Sollte ich image/x-icon oder image/vnd.microsoft.icon verwenden?
image/vnd.microsoft.icon ist der offiziell registrierte Typ, image/x-icon dagegen der, den die meisten Websites verwenden. Wenn ein System einen bestimmten Typ erwartet, passen Sie das Präfix nach dem Kopieren an.Bleiben in der Base64-Ausgabe alle Symbolgrößen erhalten?
Ja, wenn Sie das Originalformat beibehalten. Die gesamte Datei wird kodiert, sodass der Browser weiterhin die benötigte Größe auswählen kann. Bei einer Konvertierung in ein anderes Format bleibt nur ein einzelnes Bild übrig.
Funktionieren Favicons als Data-URI in jedem Browser?
Aktuelle Desktop-Browser zeigen sie im Tab an. Lesezeichen, Verknüpfungen auf dem Startbildschirm und einige ältere Browser ignorieren eingebettete Symbole unter Umständen, daher sollten öffentliche Websites weiterhin eine Favicon-Datei bereitstellen.