Bild

Favicon-Generator

Alle Symbolgrößen plus manifest.json und HTML-Schnipsel als ZIP.

Was es macht. Ein Favicon ist das kleine Symbol im Browser-Tab, im Lesezeichen und auf dem Startbildschirm. Dieses Werkzeug erzeugt aus einem Bild alle heute nötigen Größen, dazu die manifest.json und den HTML-Schnipsel für den Head — als ZIP zum Entpacken ins Wurzelverzeichnis.

Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline

So benutzt du Favicon-Generator

Zieh ein quadratisches Bild auf das Feld, idealerweise mindestens 512 × 512 Pixel.
Prüf die Vorschauen in den verschiedenen Größen.
Lade das ZIP herunter und kopier den HTML-Schnipsel in den Head deiner Seite.

Welche Größen wirklich nötig sind

Früher waren es Dutzende. Heute reichen vier Dateien für praktisch alle Fälle.

Welche Größen wirklich nötig sind
Datei	Größe	Wofür
favicon.ico	32 × 32	Ältere Browser, Lesezeichenleisten
icon.svg	vektoriell	Aktuelle Browser, skaliert beliebig
apple-touch-icon.png	180 × 180	iOS-Startbildschirm
icon-192.png	192 × 192	Android, Web-App-Manifest
icon-512.png	512 × 512	Android-Startbildschirm, Installationsdialog

Das ICO-Format kann mehrere Auflösungen in einer Datei enthalten; hier werden 16, 32 und 48 Pixel eingebettet. Auf die früher üblichen Dateien für Windows-Kacheln und ältere Android-Versionen kann man heute verzichten.

Warum das Symbol bei 16 Pixeln zu Matsch wird

Weil ein Logo, das für Visitenkarten entworfen wurde, in 16 Pixel nicht hineinpasst. Das ist kein Fehler des Generators, sondern eine Frage des Motivs.

Bei 16 Pixeln Kantenlänge stehen 256 Pixel zur Verfügung. Eine Wortmarke mit fünf Buchstaben hat pro Buchstabe drei Pixel Breite — das ergibt einen grauen Streifen. Feine Linien verschwinden, Farbverläufe werden zu einem Mittelwert, dünne Konturen fallen weg.

Was funktioniert: ein einzelner Buchstabe, eine einfache geometrische Form, ein kräftiges Symbol mit hohem Kontrast — großflächig, wenige Farben, keine Details.

Die verbreitete Lösung großer Marken ist ein eigenes, vereinfachtes Zeichen für kleine Größen. Für ein Favicon lohnt es sich, das Logo bewusst zu reduzieren, statt es zu verkleinern.

Was in den Head gehört

Vier Zeilen genügen. Sie stehen im ZIP als fertiger Schnipsel bereit.

Wichtig ist, dass die Dateien im Wurzelverzeichnis liegen. Browser fragen /favicon.ico auch ohne HTML-Verweis ab — eine Datei dort erspart 404-Einträge im Protokoll.

Ein SVG-Favicon ist die beste Wahl für aktuelle Browser, weil es in jeder Größe scharf bleibt und über prefers-color-scheme im Dunkelmodus die Farbe wechseln kann. Als alleinige Datei reicht es nicht: Safari und ältere Browser brauchen weiterhin PNG und ICO.

Und der häufigste Grund, warum ein neues Favicon nicht erscheint: Browser speichern es besonders hartnäckig. Ein hartes Neuladen genügt oft nicht — eine geänderte Adresse mit Versionsparameter hilft zuverlässiger.

Häufige Fragen

Welche Größen brauche ich?

Vier Dateien reichen: ICO mit 32, ein SVG, ein Apple-Touch-Icon mit 180 und PNG mit 192 und 512.

Warum sieht mein Favicon unscharf aus?

Weil das Motiv zu detailliert ist. Bei 16 Pixeln funktionieren nur einfache, kontrastreiche Formen.

Reicht ein SVG allein?

Nein. Aktuelle Browser ja, Safari und ältere brauchen weiterhin PNG und ICO.

Warum erscheint mein neues Favicon nicht?

Browser speichern Favicons hartnäckig. Ein Versionsparameter in der Adresse hilft zuverlässiger als hartes Neuladen.

Wohin gehören die Dateien?

Ins Wurzelverzeichnis. Browser fragen /favicon.ico auch ohne HTML-Verweis ab.

Wird mein Bild hochgeladen?

Nein, alle Größen entstehen in diesem Tab.

Ratgeber zu Favicon-Generator

PNG vs JPG vs WebP: Which Format to Use8 min read