Favicon-Generator

Ein Favicon ist heute mehr als eine 16x16-Datei. Browser lesen favicon.ico für Tabs und Lesezeichen, iOS sucht beim Hinzufügen zum Home-Bildschirm nach einem 180x180 großen apple-touch-icon.png, und Android sowie installierbare Web-Apps lesen Icons in 192x192 und 512x512 aus einem Web-Manifest. Dieser Favicon-Generator erzeugt alle diese Dateien aus einem einzigen Quellbild und packt sie in ein ZIP, zusammen mit den HTML-Tags, die sie einbinden.

Was im Favicon-Paket steckt

Jedes erzeugte ZIP enthält neun Dateien. Die Dateinamen folgen den Konventionen, die die meisten Frameworks und Hosting-Vorlagen erwarten. In der Regel kopieren Sie sie einfach ins öffentliche Stammverzeichnis Ihrer Website, ohne etwas umzubenennen.

• favicon.ico: eine ICO-Datei mit drei Größen (16x16, 32x32 und 48x48), intern als PNG komprimiert. Ältere Browser und Windows-Verknüpfungen wählen die passende Größe.
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png: dieselben Größen als einzelne PNG-Dateien, eingebunden über die 16- und 32-px-Tags.
• apple-touch-icon.png: 180x180, die Größe, die iOS und iPadOS für Verknüpfungen auf dem Home-Bildschirm verwenden.
• android-chrome-192x192.png und android-chrome-512x512.png: die beiden Größen aus dem Manifest für Android und installierbare Web-Apps.
• site.webmanifest: ein JSON-Manifest mit den beiden Android-Icons, weißer Theme- und Hintergrundfarbe und dem Anzeigemodus standalone.
• favicon-snippet.html: fünf <link>-Tags (ICO, PNG 32 px, PNG 16 px, Apple-Touch-Icon, Manifest) zum Einfügen in den <head> Ihrer Seiten.

Öffnen Sie vor dem Veröffentlichen die site.webmanifest und ersetzen Sie die Platzhalterwerte bei name und short_name durch den Namen Ihrer Website. Passen Sie auch theme_color an, falls Weiß nicht zu Ihrem Design passt.

So erstellen Sie ein Favicon aus einem Bild

1. Ziehen Sie ein PNG-, JPG-, WebP-, BMP-, TIFF- oder AVIF-Bild in das Tool. Ein quadratisches Logo mit mindestens 512x512 Pixeln liefert das sauberste Ergebnis, da 512 px die größte erzeugte Größe ist.
2. Wählen Sie den Einpassungsmodus Contain oder Cover (Erklärung unten).
3. Legen Sie den Hintergrund fest: transparent lassen oder einen Hex-Farbwert wie #FFFFFF eingeben.
4. Klicken Sie auf Generate Favicon Package. Ein Vorschauraster zeigt jedes PNG mit Pixelgröße und Dateigröße sowie die Größe der ICO-Datei.
5. Laden Sie das ZIP herunter, entpacken Sie es ins Stammverzeichnis und fügen Sie das Snippet in den HTML-Head ein.

Contain oder Cover: der richtige Einpassungsmodus

Favicons sind quadratisch, Logos meistens nicht. Der Einpassungsmodus bestimmt, was mit einem rechteckigen Quellbild passiert.

• Contain (Standard): Das gesamte Bild wird in das Quadrat eingepasst und zentriert. Nichts wird abgeschnitten, der freie Rand wird mit der Hintergrundfarbe gefüllt oder bleibt transparent. Ideal für breite Wortmarken oder Logos, deren Ränder wichtig sind.
• Cover: Das Bild wird so weit skaliert, bis es das Quadrat füllt, und dann mittig beschnitten. Keine leeren Streifen, aber die äußeren Bereiche breiter oder hoher Bilder gehen verloren. Geeignet für Fotos, Avatare oder eine Bildmarke, die bereits mittig sitzt.

Skaliert wird mit einem Lanczos3-Filter, der Kanten auch beim Verkleinern eines großen Logos auf 16 Pixel scharf hält. In dieser Größe verschwinden feine Details und Schrift ohnehin. Eine vereinfachte Bildmarke oder ein einzelner Buchstabe ist im Browser-Tab meist besser lesbar als das vollständige Logo.

Hintergrund: transparent oder einfarbig

Ein transparenter Hintergrund passt sich hellen wie dunklen Browser-Tabs an. Eine Vollfarbe ist für das Apple-Touch-Icon die sicherere Wahl, da iOS bei Home-Bildschirm-Icons keine Transparenz beibehält und diese Bereiche mit einer Vollfarbe füllt, meist Schwarz. Das Feld akzeptiert das Wort transparent oder einen sechsstelligen Hex-Wert (#RRGGBB). Die Kurzschreibweise #FFF wird abgelehnt. Der Hintergrund gilt für alle Größen im Paket. Brauchen Sie ein transparentes Tab-Icon und ein Apple-Icon mit Vollfarbe, erzeugen Sie zwei Pakete und nehmen aus jedem ZIP die passenden Dateien.

Mehrere Websites in einem Durchgang

Legen Sie mehrere Quellbilder gleichzeitig ab: Jedes erhält ein eigenes ZIP mit dem Namen der Quelldatei (zum Beispiel logo-favicon-package.zip), alle gebündelt in einem favicon-packages.zip. Einpassungsmodus und Hintergrund gelten für alle Bilder.

Grenzen, die Sie kennen sollten

• Keine SVG-Eingabe: Der Generator akzeptiert nur Rasterbilder. Liegt Ihr Logo als SVG vor, rendern Sie es zuerst mit dem SVG-zu-PNG-Konverter als großes PNG.
• Keine SVG-Favicons als Ausgabe: Das Paket enthält nur ICO- und PNG-Dateien, die jeder Browser versteht. Maskable Icons und Varianten für den Dunkelmodus werden nicht erzeugt.
• Kleine Quellen werden hochskaliert: Ein 64x64-Bild auf 512x512 gestreckt wirkt unscharf. Verwenden Sie die größte verfügbare Version Ihres Logos.
• Kein freier Bildausschnitt: Cover schneidet immer mittig zu. Für einen bestimmten Ausschnitt schneiden Sie das Bild vorher mit dem Tool zum Zuschneiden, Drehen und Spiegeln zu.

Im Vergleich zu Bildbearbeitung und Kommandozeile

Dieselben Dateien lassen sich auch mit einem Bildbearbeitungsprogramm erzeugen, indem Sie jede Größe einzeln exportieren, oder mit ImageMagick über einen Resize-Befehl pro Größe und einen weiteren Befehl für die ICO-Datei. Beides funktioniert, aber Manifest und Link-Tags müssen Sie danach noch selbst schreiben. Hier entsteht das ganze Set in einem Schritt mit einheitlicher Benennung, was vor allem beim Aufsetzen neuer Websites oder beim Rebranding mehrerer Projekte Zeit spart.

Ihr Logo bleibt auf Ihrem Gerät

Der Favicon-Generator läuft vollständig im Browser-Tab. Das Bild wird von Rust-Code, der zu WebAssembly kompiliert ist, dekodiert, skaliert und gezippt. Keine Anfrage überträgt Ihre Datei an einen Server. Das zählt, wenn Sie an einer noch unveröffentlichten Marke arbeiten, am Logo eines Kunden unter Geheimhaltungsvereinbarung oder an einem Produktnamen vor der Ankündigung. Da keine Daten an Dritte gehen, entsteht auch keine Auftragsverarbeitung im Sinne der DSGVO. Prüfen können Sie das im Netzwerk-Tab der Entwicklertools oder indem Sie nach dem Laden der Seite die Internetverbindung trennen.

Häufige Fragen

Welche Favicon-Größen brauche ich wirklich?

Für die meisten Websites: eine favicon.ico mit 16, 32 und 48 px, ein PNG in 32x32, ein Apple-Touch-Icon in 180x180 sowie Icons in 192x192 und 512x512 im Web-Manifest. Genau das enthält dieses Paket.

Wohin gehören die Favicon-Dateien?

Ins öffentliche Stammverzeichnis Ihrer Website, damit /favicon.ico erreichbar ist. Das Snippet verwendet Pfade ab dem Stamm wie /favicon-32x32.png. Legen Sie die Dateien in einen Unterordner, passen Sie die Pfade im Snippet und in der site.webmanifest an.

Kann ich ein Favicon aus einem transparenten PNG erstellen?

Ja. Lassen Sie den Hintergrund auf transparent, dann bleibt die Transparenz in der ICO-Datei und allen PNGs erhalten. Für das Apple-Touch-Icon empfiehlt sich eine Vollfarbe, weil iOS transparente Bereiche meist schwarz füllt.

Warum ist mein Favicon unscharf?

Entweder ist das Quellbild kleiner als die erzeugten Größen, oder das Logo hat zu feine Details für 16 oder 32 Pixel. Nutzen Sie eine Quelle mit mindestens 512x512 und für die kleinsten Größen eine vereinfachte Bildmarke.

Muss ich das Web-Manifest anpassen?

Das sollten Sie. Es enthält Platzhalter bei name und short_name sowie weiße Farben. Ändern Sie diese Werte, damit Android den Namen Ihrer Website unter dem Icon anzeigt.

Wird mein Logo irgendwo hochgeladen?

Nein. Alles läuft lokal über WebAssembly. Nichts wird an einen Server gesendet, gespeichert oder protokolliert.

Wenn Sie die Hintergrundfarbe aus Ihrem Corporate Design übernehmen möchten, liest der Farbpaletten-Extraktor die exakten HEX-Werte aus Ihrem vorhandenen Logo aus.