Favicon-Generator
Alle Icon-Formate, das Manifest und das HTML-Snippet aus einem Bild — direkt im Browser, ZIP on-the-fly.
Favicon in drei Schritten — ohne Photoshop, ohne Cloud-Dienst
Ein Favicon ist das kleine Icon, das Browser im Tab, im Lesezeichen-Menü und neben deinem Eintrag in der Google-Suche zeigen. Kein Gimmick: ohne Favicon schickt der Browser bei jedem Seitenaufruf eine 404-Anfrage an deinen Server, dein Eintrag in Suchergebnissen wirkt weniger vertrauenswürdig, und die Marke bleibt gesichtslos.
Der Generator frisst ein quadratisches Bild (am besten 512 × 512, idealerweise dein Logo) und spuckt ein ZIP mit allem aus, was moderne Browser, iOS, Android und Windows heute wirklich brauchen — inklusive site.webmanifest, Apple-Touch-Icon und dem klassischen favicon.ico (Container für 16 / 32 / 48 px). Dazu kriegst du ein Copy-paste-Snippet für den <head>.
Alles läuft im Browser. Dein Bild wird nicht hochgeladen, nicht gespeichert, nicht getrackt.
Was genau steckt im ZIP?
favicon.ico
Der Klassiker. Multi-Resolution-Container mit 16 / 32 / 48 px — alles in einer Datei. Gehört in den Web-Root, weil Browser bei fehlendem <link rel="icon"> automatisch dort suchen.
PNG-Pyramide
16, 32, 96, 150, 180, 192, 310, 512 px. Jede Grösse bedient eine spezifische Stelle: Tab-Icon, Google-Suchergebnis, Windows-Kachel, Apple-Touch-Icon, Android-Home-Screen, PWA-Splash.
site.webmanifest
Web-App-Manifest mit den beiden Android-Icon-Grössen, theme_color und background_color. Android Chrome und PWA-Installationen lesen das — ohne Manifest keine «Zum Startbildschirm hinzufügen»-Option.
favicon.svg (wenn Input SVG war)
Vektor-Favicon für moderne Browser. Skaliert verlustfrei auf jede Device-Pixel-Ratio, wird z.B. von Chrome und Firefox dem PNG vorgezogen, wenn vorhanden.
snippet.html
Die Copy-paste-Zeilen für deinen <head>, mit dem konfigurierten Pfad. Enthält die <link>-Tags für ICO, PNGs, SVG (wenn generiert), Apple-Touch-Icon und Manifest plus die msapplication-*-Metas für Windows.
Was ist eigentlich eine ICO-Datei?
ICO ist Windows' Icon-Format und gewissermassen ein Gesamtpaket: Die Datei besteht aus mehreren Ebenen und enthält pro Ebene ein PNG in einer bestimmten Grösse. Je nachdem, wo das Favicon auftaucht — Browser-Tab, Desktop-Verknüpfung, Lesezeichenleiste — greift sich das System die passende Auflösung aus dem Container.
Gängige ICO-Grössen sind 16 × 16, 32 × 32 und 48 × 48. Die Datei liegt bewusst im Web-Root, weil Browser dort per Konvention nach /favicon.ico fragen, selbst wenn du sie nicht verlinkt hast.
Wie sollte ein Favicon aussehen?
Nicht zu überladen. Auf 16 × 16 Pixeln geht jedes Detail verloren — was dort nicht mit einem Blick lesbar ist, bleibt unsichtbar. Ein einzelner Buchstabe in deiner Markenfarbe, ein stark reduziertes Logo oder ein prägnantes Symbol funktionieren am zuverlässigsten. Google macht es mit dem «G», Twitter/X mit dem Vogel, GitHub mit der Katze — alle scharf abstrahiert.
Favicon eingebunden — und jetzt?
Lade das ZIP auf deinen Webserver ins passende Verzeichnis hoch (per FTP, Git-Deploy oder direkt per CMS-Medienbibliothek). Das favicon.ico gehört zwingend in den Web-Root, die PNGs und das Manifest dürfen unter den konfigurierten Pfad (Default /assets/ico/). Danach das snippet.html in den <head> deiner Seite kopieren.
Tipp: Browser cachen Favicons hartnäckig. Nach der Umstellung einmal Hard-Reload (Ctrl+Shift+R bzw. Cmd+Shift+R) — sonst schwörst du eine halbe Stunde lang, dass «es nicht funktioniert».