Anleitung
- Fügen Sie den Base64-String oder die Data-URI eines Icons oder des Bildes ein, aus dem Sie ein Icon machen möchten.
- Prüfen Sie Vorschau und Abmessungen. Ein quadratisches Ausgangsbild ergibt das sauberste Icon.
- ICO ist bereits vorausgewählt. Wählen Sie unter „Symbolgröße“ eine Größe (16, 32, 48, 64, 128 oder 256 Pixel) oder „Mehrere Größen (16, 32, 48, 256)“.
- Laden Sie die .ico-Datei herunter. Ist die Eingabe bereits ein ICO und sollen alle enthaltenen Bilder unverändert bleiben, wählen Sie „Original“.
ICO-Dateien in Base64
Eine ICO-Datei ist ein kleiner Container: ein Header, ein Verzeichnis mit Einträgen und ein Bild pro Eintrag, jeweils als BMP- oder PNG-Daten gespeichert. Der Header beginnt mit den Bytes 00 00 01 00, daher beginnt das Base64 eines Icons mit AAABAA. Base64-Icons begegnen Ihnen in Favicon-Data-URIs wie <link rel="icon" href="data:image/x-icon;base64,...">, in HTML-Seiten, die aus einer einzigen Datei bestehen, und in APIs, die Website-Icons zurückgeben.
Der registrierte MIME-Typ ist image/vnd.microsoft.icon, doch image/x-icon ist weitaus verbreiteter und funktioniert überall.
Welche Icon-Größe Sie wählen sollten
| Größe | Typische Verwendung |
|---|---|
| 16 × 16 | Browser-Tab und Lesezeichen auf Standardbildschirmen |
| 32 × 32 | Browser-Tab auf hochauflösenden Bildschirmen |
| 48 × 48 | Symbole auf dem Windows-Desktop und im Explorer |
| 64, 128 | Größere Vorschauen und Anwendungslisten |
| 256 × 256 | Große und extragroße Symbolansichten unter Windows |
Die Option „Mehrere Größen (16, 32, 48, 256)“ vereint diese vier Größen in einer Datei, sodass jedes System die passendste auswählen kann. Die enthaltenen Bilder sind PNG-komprimiert; das erhält die Transparenz und wird von Windows Vista und neuer sowie von allen modernen Browsern unterstützt.
Das Icon als Favicon verwenden
Browser fordern /favicon.ico automatisch aus dem Stammverzeichnis der Website an, daher funktioniert eine dort gespeicherte Datei auch ganz ohne Markup. Eine Base64-Data-URI im href spart diese Anfrage, allerdings wird das Icon dann mit jeder Seite erneut heruntergeladen, statt separat im Cache zu liegen. Moderne Browser akzeptieren auch PNG- und SVG-Icons, und eine gängige Konfiguration kombiniert beide:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Beginnen Sie mit einem quadratischen Bild mit einfachen Formen und starkem Kontrast; feine Details verschwinden bei 16 Pixeln. Eine PNG-Version für andere Zwecke erhalten Sie mit Base64 zu PNG.
Häufig gestellte Fragen
Welche Größe sollte favicon.ico haben?
Ein Icon mit mehreren Größen, das Bilder mit 16, 32 und 48 Pixeln enthält, deckt Browser und Windows ab. Die Option „Mehrere Größen (16, 32, 48, 256)“ fügt zusätzlich 256 für große Symbolansichten hinzu.
Kann ich ein Base64-PNG oder -SVG in ICO konvertieren?
Ja. Fügen Sie es ein, belassen Sie „Herunterladen als“ auf ICO und wählen Sie eine Größe. Jedes Bild, das Ihr Browser anzeigen kann, lässt sich konvertieren.
Warum zeigt die Vorschau nur eine Größe meines Icons?
Eine ICO-Datei kann mehrere Bilder enthalten, eine Vorschau zeigt aber nur eines davon. Laden Sie die Datei als „Original“ herunter, um alle Bilder in der Datei zu behalten.
Bleibt bei ICO die Transparenz erhalten?
Ja. Die Icons werden als PNG-Daten mit vollständigem Alphakanal gespeichert, sodass abgerundete Ecken und weiche Kanten transparent bleiben.
Wie bringe ich ein Icon in eine Data-URI?
href Ihres <link rel="icon">-Tags ein.