Favicon-Generator
Favicons und App-Icons aus Buchstabe, Form oder Logo. Mit einem Klick als Paket mit allen Grössen, Manifest und HTML-Code.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Ein Favicon ist das kleine Bild im Browser-Tab, in Lesezeichen und im Verlauf. Smartphones zeigen dazu ein App-Icon, wenn jemand deine Website auf dem Startbildschirm ablegt. Moderne Websites brauchen dafür mehrere Dateien: favicon.ico für ältere Browser, favicon.svg in jeder Grösse und für den Dunkelmodus, ein Apple Touch Icon, Icons für Android und ein Manifest. Der Favicon-Generator erstellt alles aus einem einzigen Entwurf.
So geht’s
Wähle als Inhalt einen Buchstaben, eine Form aus der Bibliothek oder dein eigenes Logo. Lege Hintergrund (Farbe, Verlauf, Muster oder transparent), Kachelform und Innenabstand fest. Mit der Leertaste würfelst du neue Farben. Schalte bei Bedarf eigene Farben für den Dunkelmodus ein und trage unter App und Manifest Name und Farben ein. Exportiere dann das Icon-Paket als ZIP, kopiere die Dateien in den Stammordner deiner Website und füge den HTML-Code in den head ein.
Favicon-Generator jetzt ausprobierenHäufige Fragen
- Welche Dateien sind im Icon-Paket?
- favicon.ico mit 16, 32 und 48 px, favicon.svg, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, icon-512-maskable.png für Android, site.webmanifest und head-snippet.html mit den passenden Tags. Das sind die Dateien, die aktuelle Browser und Smartphones tatsächlich nutzen.
- Was ist ein Maskable-Icon?
- Android schneidet App-Icons in Kreise, Tropfen oder abgerundete Quadrate. Ein Maskable-Icon füllt deshalb die ganze Fläche, und der Inhalt liegt in der sicheren Zone, einem Kreis mit 80 % Durchmesser. Die Variante Maskable zeigt dir, wie es aussieht.
- Wie funktioniert das Favicon im Dunkelmodus?
- Mit eigenen Farben im Dunkelmodus enthält favicon.svg beide Varianten. Der Browser wählt sie selbst über prefers-color-scheme. Dazu bekommt das HTML eine zweite theme-color für dunkle Oberflächen.
- Wird mein Logo hochgeladen?
- Nein. Alles passiert in deinem Browser, auch das Packen des ZIP. Dein Logo landet nicht im Teilen-Link; SVG-Dateien werden vorher von Scripts und externen Verweisen befreit.
- Warum sieht der Buchstabe auf einem anderen Gerät leicht anders aus?
- Text nutzt die Systemschriften des Geräts, damit keine Schriftdateien nötig sind. Die PNG-Dateien entstehen mit den Schriften deines Computers. Für ein exakt gleiches Ergebnis überall nimm eine Form oder dein Logo als SVG.