Favicon-Generator
Erzeugen Sie alle Favicon-Größen aus einem einzigen Bild — ico, PNG, Apple-Touch-Icon, manifest.json — mit kopierbarem HTML-Snippet.
Was dieses Tool macht
Nimmt ein einzelnes Quellbild – typischerweise ein quadratisches Logo als SVG oder PNG – und erzeugt jede Favicon-Variante, die eine moderne Website braucht, gebündelt als einzelnes ZIP. Die Ausgabe enthält ein favicon.ico mit mehreren Auflösungen (16, 32 und 48 Pixel) für ältere Browser und die unvermeidliche /favicon.ico-Anfrage, eigenständige PNGs in 16, 32, 192 und 512, ein Apple-Touch-Icon in 180 für iOS-Homescreen-Installationen und ein 1200 × 630 Open-Graph-Bild für Link-Vorschauen auf Twitter, Facebook, Slack, Discord und LinkedIn. Das ZIP enthält außerdem einsatzbereites HTML für den <head> und eine funktionierende manifest.json für Progressive-Web-App-Installationen – lege die Dateien ins Stammverzeichnis deiner Site, füge das Snippet ein, ersetze Namen und Theme-Farbe und fertig. Alles läuft lokal auf deinem Gerät – dein Logo verlässt nie den Browser, geht nie an unsere Server und wird nicht gespeichert, indexiert, geloggt oder geteilt. Keine Anmeldung, kein Wasserzeichen, kein E-Mail-Zwang. Wähle einen transparenten, weißen oder eigenfarbigen Hintergrund, passe den Innenabstand an, damit das Logo nicht an den Rand stößt, und sieh dir vor dem Download jede Größe live in der Vorschau an.
So erzeugst du Favicons
- Logo ablegen — Eine quadratische SVG oder PNG funktioniert am besten. Nicht-quadratische Quellen werden automatisch mit Letterbox versehen.
- Hintergrund und Innenabstand festlegen — Transparent für Icons, die bereits einen Hintergrund haben. Weiß oder eine Markenfarbe für Icons ohne. Innenabstand schafft Luft.
- Generieren — Jede Größe wird lokal gerendert und in einem einzelnen ZIP gebündelt. Die klassische
favicon.icowird byte-genau mit eingebetteten 16/32/48-PNG-Daten erstellt – so, wie es modernes Windows erwartet. - Snippets einfügen — Lege die Dateien ins Stammverzeichnis deiner Site, füge das HTML-Snippet in den
<head>ein und ersetze die Platzhalter in der manifest.json.
So wird das Paket erstellt
Jede PNG-Variante wird frisch in der Zielgröße gerendert, das Seitenverhältnis deiner Quelle wird beibehalten und ein Innenabstand wird um den Rand angewendet, damit ein quadratisches Logo nie in den Rahmen knallt. Die klassische favicon.ico bündelt drei PNG-codierte Größen (16, 32 und 48 Pixel) in einer Datei – ein Format, das Windows seit über einem Jahrzehnt unterstützt – und bleibt insgesamt unter 5 KB, sodass sie sofort lädt und keinem Site-Gewicht hinzufügt. Das Open-Graph-Vorschaubild ist eine 1200 × 630 große Fläche mit dem Logo zentriert auf 70% der kürzeren Achse, auf dem von dir gewählten Hintergrund (oder weiß, wenn du transparent gewählt hast – Link-Vorschaukarten brauchen immer eine Vollfüllung, sonst verschwindet das Icon vor dunklen Social-Media-Themes). Apple-Touch-Icons werden in 180 × 180 gerendert, was iOS für jeden Installationskontext hoch- oder runterskaliert. PWA-Icons werden in 192 und 512 erzeugt, den beiden Größen, nach denen Android Chrome in der manifest.json sucht.
Dateien im ZIP
favicon.ico mit 16/32/48-PNG-Daten – wird von jedem Browser-Tab verwendet. favicon-16x16.png und favicon-32x32.png für moderne Browser, die PNG bevorzugen. apple-touch-icon.png in 180 × 180 – wird auf dem iOS-Homescreen angezeigt. favicon-192x192.png und favicon-512x512.png für Android Chrome und PWA-Installationen. og-image.png in 1200 × 630 – wird für Link-Vorschauen auf Twitter, Facebook, Slack und Discord verwendet. manifest.json, die auf die PWA-Icons verweist. snippet.html mit jedem <link>- und <meta>-Tag, den du einfügen musst.
Häufig gestellte Fragen
Wird mein Logo hochgeladen?
Brauche ich wirklich eine favicon.ico?
/favicon.ico standardmäßig an. Moderne Browser bevorzugen die PNG-Deklarationen aus dem HTML-Snippet, aber die .ico im Root kostet dich 5 KB und vermeidet 404-Fehler in deinen Access-Logs.