Favicon-Generator

Der Favicon-Generator verwandelt ein beliebiges Bild in einen vollständigen Satz Favicon-PNGs für Browser-Tabs, iOS-Home-Bildschirme, Android-Geräte und PWAs und liefert den HTML-Ausschnitt mit, der sie einbindet. Er ist für Seitenbetreiber und Entwickler gedacht, die eine gepflegte Tab-Präsenz wollen, ohne ein Logo sechsmal von Hand zu skalieren.

Was das Werkzeug erzeugt

Laden Sie ein einzelnes Bild hoch, und das Werkzeug erzeugt sechs quadratische PNGs in den heute relevanten Größen:

Größe	Typische Verwendung
16×16	Browser-Tab-Icon
32×32	Retina-Tab- und Lesezeichen-Icon
48×48	Allgemeiner Desktop-Rückfall
180×180	Apple Touch Icon für iOS-Home-Bildschirme
192×192	Android-Home-Bildschirm- und PWA-Icon
512×512	PWA-Splashscreen und Store-Eintrag

Jede Größe wird live in einem Vorschauraster gerendert, sodass Sie genau sehen, wie die Grafik sich hält, bevor Sie etwas herunterladen. Jede Karte hat ihre eigene Download-Schaltfläche, und ein separates Feld zeigt das fertig einfügbare HTML.

Der Zuschnitt ist ein mittiges Quadrat. Ist die Quelle breiter als hoch, werden links und rechts gleich breite Streifen abgeschnitten; ist sie höher, verschwinden Streifen oben und unten. Der Ursprung des Zuschnitts wird mit einem Abrunden nach unten berechnet, ungerade Pixelmaße runden also um ein Pixel nach links oben.

Schritt für Schritt

1. Bild öffnen oder ablegen. Klicken Sie auf die gestrichelte Ablagefläche zum Durchsuchen oder ziehen Sie eine Datei darauf. Formate, die der Browser dekodieren kann — PNG, JPEG, WebP, GIF und SVG — funktionieren alle.
2. Vorschauraster prüfen. Vergleichen Sie das kleinste 16×16 mit dem 512×512. Ist das kleine ein unleserlicher Fleck, vereinfachen Sie die Grafik, bevor Sie fortfahren.
3. Jede Größe herunterladen. Nutzen Sie die Schaltfläche unter jeder Vorschau. Denken Sie daran, dass die drei größten Dateien den Namen apple-touch-icon.png teilen; benennen Sie 192 und 512 nach dem Speichern um.
4. HTML-Ausschnitt kopieren. Die Kopierschaltfläche im Code-Feld legt den gesamten Block in Ihre Zwischenablage.
5. Dateien ablegen und Ausschnitt einfügen. Legen Sie die PNGs in das Wurzelverzeichnis Ihrer Seite und fügen Sie den Ausschnitt in den <head> jeder Seite ein, möglichst direkt vor </head>.

Der HTML-Ausschnitt und die Dateinamen

Der erzeugte Block ist eine Zusammenfassung dessen, was jede Plattform erwartet, kein rätselhafter Zauberspruch:

• Drei <link rel="icon" type="image/png">-Tags decken die Größen 16, 32 und 48 Pixel ab.
• <link rel="apple-touch-icon" sizes="180x180"> sagt iOS, welches Bild verwendet wird, wenn jemand Ihre Seite zum Home-Bildschirm hinzufügt.
• Die Android-Icons 192 und 512 nutzen rel="icon".
• <link rel="mask-icon"> verweist auf ein Safari-Pinned-Tab-SVG, das dieses Werkzeug nicht erzeugt.
• <link rel="manifest"> verweist auf ein Web-App-Manifest, das hier ebenfalls nicht erzeugt wird.
• Die beiden msapplication-*-Metas setzen eine Windows-Kachellfarbe und eine optionale Konfigurationsdatei.
• <meta name="theme-color"> tönt die Browser-Oberfläche auf Mobilgeräten; Weiß ist ein sicherer Standard, sollte aber zu Ihrer Marke passen.

Wenn Sie bereits ein Framework nutzen, das Favicons einfügt, behalten Sie nur die benötigten Zeilen, anstatt den ganzen Block einzufügen.

Der Ausschnitt setzt bestimmte Dateinamen voraus. Laden Sie die PNGs 16, 32 und 48 als favicon-16x16.png, favicon-32x32.png und favicon-48x48.png. Der 180-px-Download heißt bereits apple-touch-icon.png. Benennen Sie die Downloads 192 px und 512 px in android-chrome-192x192.png und android-chrome-512x512.png um. Ohne diese Umbenennung verweist Ihr Layout auf nicht vorhandene Dateien, und die 404-Fehler erscheinen in der Konsole.

Zwei referenzierte Assets liegen schlicht außerhalb des Umfangs: das Safari-Mask-Icon-SVG und das Web-Manifest. Erstellen Sie sie separat, wenn Sie Pinned-Tab-Styling oder PWA-Installierbarkeit wünschen, oder löschen Sie diese Zeilen.

Ein lesbares Favicon mit 16 px gestalten

Das 16×16-Favicon ist die härteste Prüfung, und detaillierte Logos scheitern fast immer daran. Ein paar Regeln helfen:

• Verwenden Sie eine einfache Silhouette mit ein oder zwei Formen; verzichten Sie ganz auf Slogans und kleinen Text.
• Sorgen Sie für starken Kontrast zwischen Zeichen und Hintergrund. Dünne graue Linien verschwinden in Tab-Größe.
• Testen Sie das Zeichen auf hellen und dunklen Tableisten, denn die Browser unterscheiden sich.
• Enthält Ihr Logo eine Wortmarke, verwenden Sie nur das Symbol für das Favicon.
• Transparenz funktioniert in modernen Browsern, doch einige Android- und iOS-Kontexte setzen das Icon auf einen eigenen Hintergrund; prüfen Sie die Varianten 180 und 192 sorgfältig.

Bekannte Einschränkungen

Das Werkzeug erzeugt nur PNG — kein ICO, SVG oder Web-Manifest. Es bietet weder Rand noch Hintergrundfarbe noch Positionierung pro Größe, ein Logo, das die ganze Fläche füllt, verliert seine Ränder also an den mittigen Zuschnitt. Der HTML-Ausschnitt ist im Kommentar mit Ihrem Platzhalter beschriftet und enthält nicht Ihre echte Domain; passen Sie die Pfade an, wenn Sie Assets in einem Unterverzeichnis statt im Wurzelverzeichnis hosten. Alles wird clientseitig gerendert, sehr große Ausgangsbilder können daher langsam zu verarbeiten sein, werden aber nie hochgeladen.

Testen und Ausliefern des Sets

Nachdem die Dateien platziert sind, können Favicons veraltet erscheinen, weil Browser sie aggressiv zwischenspeichern. Laden Sie die Seite hart neu oder öffnen Sie sie in einem privaten Fenster, um die neuen Icons statt der alten zwischengespeicherten zu sehen. Tab-Icon und Lesezeichen-Icon werden getrennt zwischengespeichert, prüfen Sie also beide. Fügen Sie die Seite unter iOS zum Home-Bildschirm hinzu, um zu bestätigen, dass das apple-touch-icon ohne Screenshot-Rückfall rendert. Für Android- und PWA-Installationen nutzen Sie die Installationsaufforderung des Browsers und prüfen das Manifest in den Entwicklerwerkzeugen, damit die Dateien 192 und 512 aufgelöst werden.

Liefern Sie die Icons vom Wurzelverzeichnis unter stabilen Pfaden aus, damit der Ausschnitt auf jeder Route funktioniert, auch auf verschachtelten Seiten. Wenn Ihre Build-Pipeline Dateinamen hasht, schließen Sie die Favicon-Dateien aus oder aktualisieren Sie die Pfade im Ausschnitt, denn ein gehashtes favicon-16x16.abc123.png wird unter /favicon-16x16.png nicht gefunden. Setzen Sie schließlich das theme-color-Meta auf Ihre Markenfarbe statt auf den Standardwert Weiß — es tönt die Adressleiste des mobilen Browsers und ist eine der wenigen favicon-nahen Einstellungen, die Nutzer bemerken.

Verwandte Tools

• Bildzuschneider
• Bildformat-Konverter
• Meta-Tag-Generator