Kompletten Favicon-Satz aus einem Bild erzeugen
Lege ein Logo als PNG, JPG, WebP oder SVG ab und erhalte alles, was eine Website an Symbolen braucht: eine favicon.ico mit 16, 32 und 48 Pixeln in einer einzigen Datei, den PNG-Satz für Browser, iOS und Android, ein fertiges site.webmanifest und die Zeilen für deinen <head> – gebündelt als ZIP. Gerechnet wird in deinem Browser: kein Upload, offline nutzbar.
Welche Dateien landen im Archiv?
| Datei | Größe | Wofür |
|---|---|---|
favicon.ico | 16, 32, 48 px | Tab, Lesezeichen, Windows-Verknüpfung – alles in einer Datei |
favicon-16x16.png | 16 px | Adresszeile und Tab |
favicon-32x32.png | 32 px | Lesezeichenleiste, Retina-Tabs |
favicon-48x48.png | 48 px | Kachelansicht, Windows-Verknüpfungen |
apple-touch-icon.png | 180 px | Startbildschirm auf iPhone und iPad |
android-chrome-192x192.png | 192 px | Android-Startbildschirm |
android-chrome-512x512.png | 512 px | Installationsdialog installierbarer Web-Apps |
site.webmanifest | – | Name, Farben und Icon-Verweise für Android |
favicon-snippet.html | – | die fertigen Zeilen für den <head> |
Warum steckt 2026 immer noch eine .ico-Datei darin?
Weil sie die einzige Datei ist, die Browser auch ohne HTML-Tag suchen: Fehlt jeder Hinweis im Dokument, fragen sie schlicht /favicon.ico in der Wurzel der Domain an. Microsoft hat das Format im März 1999 mit Internet Explorer 5 eingeführt, und seither unterstützt es jeder Browser. Der zweite Vorteil ist bis heute ungeschlagen: Eine .ico trägt mehrere Auflösungen in sich. Der Browser nimmt 16 Pixel für den Tab und 48 für die Verknüpfung auf dem Desktop, ohne dafür ein zweites Mal etwas zu laden.
Seit Windows Vista dürfen die Bilder in einer .ico vollständige PNG-Dateien sein. Genau diesen Weg geht dieses Werkzeug: Es schreibt den Verzeichniskopf, für jedes Bild einen 16 Byte langen Eintrag mit Kantenlänge, Länge und Position der Bilddaten, und dahinter die PNGs am Stück. Stimmen Länge oder Position auch nur um ein Byte nicht, zeigt Windows das Symbol einfach nicht an – ohne Fehlermeldung. Deshalb liest der Test des Werkzeugs jede erzeugte Datei wieder aus, statt sich damit zufriedenzugeben, dass überhaupt Bytes herauskamen.
Wie groß muss die Vorlage sein?
512 Pixel je Kante oder mehr, ideal ein SVG. Die größte Datei im Satz misst 512 x 512 Pixel; ist die Vorlage kleiner, muss sie hochgerechnet werden und wirkt weich. Das Werkzeug sagt es dir in dem Fall ausdrücklich, statt ein unscharfes Ergebnis kommentarlos auszugeben.
Rechteckige Vorlagen werden mittig auf ein Quadrat gesetzt, nicht beschnitten – ein breites Wortzeichen verliert damit keine Buchstaben, wird aber entsprechend klein. Für Favicons ist ohnehin fast immer das Bildzeichen ohne Schriftzug die bessere Wahl.
Warum ein eigenes Verkleinerungsverfahren?
Der Sprung von der Vorlage auf 16 Pixel entscheidet über die Qualität des ganzen Satzes. Ein einfaches Skalieren im Browser mittelt dabei so grob, dass Kanten verwischen – und ein Favicon besteht bei 16 Pixeln fast nur aus Kanten. Dieses Werkzeug rechnet deshalb mit Lanczos3, einem Filter, der benachbarte Bildpunkte gewichtet statt sie plump zusammenzufassen. Steht die dafür nötige WebAssembly-Datei ausnahmsweise nicht zur Verfügung, halbiert ein Ersatzweg stufenweise; auch das ist besser als ein einzelner Sprung, nur eben weicher.
Denk bei 16 x 16 an die Fläche: Das sind 256 Bildpunkte insgesamt, ungefähr so viel wie ein einzelner Buchstabe in diesem Absatz. Feine Linien, dünne Schrift und Verläufe überleben das nicht. Wer sein Logo dort erkennbar haben will, reduziert es auf die pure Form oder eine Initiale.
Was gehört in den <head>?
Das Werkzeug legt die Zeilen fertig bei und zeigt sie zum Kopieren an. Sie sehen so aus:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">
Die Android-Symbole tauchen hier bewusst nicht auf: Sie stehen im Manifest, und dort holt der Browser sie sich. Liegen deine Dateien nicht in der Wurzel, trägst du den Ordner im Feld Ordner auf dem Server ein – die Pfade in Zeilen und Manifest passen sich mit an.
Transparenz, Hintergrund und Rand
Transparenz bleibt erhalten, solange du sie nicht abschaltest. Für den iOS-Startbildschirm lohnt sich trotzdem oft eine Vollfarbe: Apple legt das Symbol dort auf eine abgerundete Kachel, und ein freigestelltes Logo schwebt dann ohne erkennbare Fläche. Der Regler Rand ringsum schafft dafür etwas Luft, damit die abgerundeten Ecken nichts abschneiden.
Die Themenfarbe hat mit dem Bild nichts zu tun: Sie färbt die Browserleiste auf Android und die Statusleiste einer installierten Web-App. Die Hintergrundfarbe füllt die Fläche des Symbols und dient dem Manifest gleichzeitig als Startfarbe.
Deine Vorlage bleibt auf deinem Gerät
Dekodieren, Skalieren, PNG-Kodierung und der ICO-Container entstehen vollständig im Browser. Es gibt keinen Serveraufruf, den jemand mitschneiden könnte, und kein Zwischenspeichern auf einer fremden Festplatte. Das ist nicht nur bequem, sondern für Logos, die noch nicht öffentlich sind, der eigentliche Punkt.