Favicon Generator: ICO & PNG erstellen

Was ist der Favicon Generator?

Favicon Generator ist ein kostenloses, browserbasiertes Tool, das jedes Bild in alle neun Standard-Favicon-Größen umwandelt, die moderne Browser, Betriebssysteme und mobile Plattformen benötigen. Für ein neues Website-Projekt müssen spezifische PNG-Dateien in exakten Pixelmaßen erstellt werden — 16×16 für Browser-Tabs, 180×180 für Apple Touch Icons, 192×192 und 512×512 für Android Chrome — sowie mehrere Zwischengrößen. Diese manuell zu erstellen erfordert neun separate Exportvorgänge in einem Bildbearbeitungsprogramm. Dieses Tool erledigt alle neun mit einem Klick, zeigt eine beschriftete Vorschau jeder Größe und ermöglicht den Einzel- oder Sammeldownload. Die gesamte Verarbeitung erfolgt im Browser über die Canvas-API — kein Bild verlässt Ihr Gerät.

Hauptfunktionen

• Mehrere Favicon-Größen generieren — Erstellt alle 9 Größen aus dem FAVICON_SIZES-Array: 16, 32, 48, 64, 96, 128, 180, 192 und 512 Pixel quadratisch. Jede Größe wird erzeugt, indem das Originalbild auf eine Canvas in den Zielabmessungen gezeichnet wird.
• ICO-, PNG- und WebP-Formate erstellen — Alle generierten Favicons sind PNG (über canvas.toDataURL('image/png')). Die einzelnen Dateinamen folgen Web-Standards: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png usw.
• Apple Touch Icon-Unterstützung — Die 180×180px-Ausgabe wird als apple-touch-icon.png gespeichert — der Dateiname, nach dem iOS Safari sucht, wenn ein Nutzer eine Website zum Home-Bildschirm hinzufügt.
• Android Chrome Icon-Unterstützung — Die 192×192px-Ausgabe heißt android-chrome-192x192.png und die 512×512px-Ausgabe heißt android-chrome-512x512.png, entsprechend den Namen im Standard-manifest.json Web App Manifest.
• Vorschau aller generierten Größen — Nach der Generierung zeigt ein Raster jede Größe mit einer beschrifteten Vorschau auf einem Transparenzraster-Hintergrund, dem Dateinamen, den exakten Pixelmaßen und einer Beschreibung des Verwendungszwecks (z.B. "Browser-Tab-Symbol", "Apple Touch Icon", "Chrome Web Store-Symbol").
• Einzel- oder ZIP-Download — Jede Größe hat eine eigene Download-Schaltfläche. Die Schaltfläche "Alle herunterladen" packt alle generierten Dateien — 9 PNG-Favicons, eine favicon.ico (enthält 16, 32 und 48px-Größen) und eine site.webmanifest — in ein einzelnes favicons.zip-Archiv.
• Automatische favicon.ico-Generierung — Das Tool erstellt eine korrekte ICO-Containerdatei, die die 16, 32 und 48px-PNGs mithilfe der PNG-in-ICO-Technik einbettet, bereit für <link rel="icon" type="image/x-icon" href="/favicon.ico">.
• site.webmanifest-Generierung — Eine einsatzbereite Web App Manifest-Datei, die die 192- und 512px-Android-Chrome-Icons referenziert, ist im ZIP-Archiv enthalten.
• 100% clientseitige Verarbeitung — Die Canvas-Größenänderungen laufen vollständig im Browser. Das Quellbild wird über FileReader gelesen und nie an einen Server übertragen.
• Funktioniert mit jedem Bildformat — Die Dateieingabe akzeptiert image/*, und das <img>-Element dekodiert die Datei. JPEG, PNG, SVG, WebP, GIF und AVIF funktionieren als Quellbilder.

So verwenden Sie den Favicon Generator

Schritt 1: Quellbild hochladen

Klicken Sie auf die Upload-Dropzone oder ziehen Sie Ihr Bild darauf. Für beste Ergebnisse verwenden Sie ein quadratisches Bild — das Tool skaliert Ihr Bild über ctx.drawImage(originalImage, 0, 0, size, size) auf jede Favicon-Canvas, was nicht-quadratische Eingaben streckt. Ein 512×512px oder größeres quadratisches PNG mit transparentem Hintergrund ist die ideale Quelle. Nach dem Laden des Bildes erscheint eine Vorschau mit den Originalabmessungen (z.B. 512 x 512px).

Schritt 2: Alle Größen generieren

Klicken Sie auf "Favicons generieren". Das Tool durchläuft alle 9 Größen nacheinander: Für jede Größe setzt es die versteckte Canvas auf diese Abmessung, löscht sie, zeichnet Ihr Bild skaliert auf die Canvas und speichert die resultierende Daten-URL. Nach Abschluss der Schleife bestätigt ein Erfolgs-Toast, dass alle Größen erstellt wurden.

Schritt 3: Ergebnisse in der Vorschau prüfen

Ein Raster zeigt alle 9 generierten Favicons nebeneinander. Jedes Element zeigt:

• Eine Vorschau auf einem Transparenzraster-Hintergrund (die Vorschaugröße ist auch bei größeren Ausgaben wie 512×512 auf 64×64px begrenzt)
• Den Dateinamen (z.B. android-chrome-512x512.png)
• Die exakten Pixelmaße (z.B. 512x512px)
• Eine Beschreibung des Verwendungszwecks (z.B. Android Chrome Splash)

So können Sie visuell prüfen, ob das Symbol bei kleinen Größen wie 16×16 korrekt aussieht, bevor Sie herunterladen.

Schritt 4: Einzel- oder ZIP-Download

Klicken Sie auf die Download-Schaltfläche neben einem einzelnen Favicon, um diese Datei zu speichern. Sie können auch die favicon.ico separat herunterladen — sie enthält die 16, 32 und 48px-Größen in einem einzigen ICO-Container. Zum gleichzeitigen Herunterladen aller Dateien klicken Sie auf "Alle herunterladen" in der Kopfzeile der Favicons-Karte. Dies erstellt ein favicons.zip-Archiv mit allen 9 PNG-Dateien, der favicon.ico und einer site.webmanifest-Datei.

Schritt 5: Favicons zur Website hinzufügen

Legen Sie die heruntergeladenen PNG-Dateien im öffentlichen Stammverzeichnis Ihres Projekts ab. Fügen Sie die folgenden Tags in den HTML-<head> ein:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Für Android Chrome PWA-Unterstützung referenzieren Sie die 192×192- und 512×512-Dateien in Ihrer manifest.json:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Praktische Beispiele

Neue Website einrichten

Szenario: Sie launchen eine persönliche Portfolio-Website mit Next.js und benötigen alle Standard-Favicon-Größen aus Ihrem Logo-SVG.

Eingabe: Ein 512×512px großer quadratischer PNG-Export Ihres Logos (transparenter Hintergrund).

Was das Tool erzeugt: Neun PNG-Dateien: favicon-16x16.png bis android-chrome-512x512.png, alle benannt und dimensioniert nach den Erwartungen von Browsern und mobilen Plattformen.

Warum das nützlich ist: Das manuelle Einrichten von Favicons erfordert 9 separate Exportvorgänge. Ein Klick hier ersetzt diesen gesamten Schritt.

Chrome Web Store-Symbol

Szenario: Sie reichen eine Chrome-Erweiterung ein und benötigen ein 128×128px-Symbol gemäß den Chrome Web Store-Listing-Richtlinien.

Eingabe: Das Symbol Ihrer Erweiterung in beliebiger Größe.

Was das Tool erzeugt: favicon-128x128.png mit der Bezeichnung "Chrome Web Store icon" — genau die Datei, die der Chrome Web Store benötigt.

Warum das nützlich ist: Die 128×128px-Größe ist eine spezifische Anforderung, die viele Favicon-Generatoren überspringen. Dieses Tool enthält sie mit dem korrekten Standard-Dateinamen.

PWA-Einrichtung für eine Web-App

Szenario: Sie fügen einer React-App Progressive Web App (PWA)-Unterstützung hinzu und benötigen die Manifest-Icons.

Eingabe: Ein 512×512px App-Symbol als PNG.

Was das Tool erzeugt: android-chrome-192x192.png (192×192px) und android-chrome-512x512.png (512×512px) — die zwei Größen, die in der Web App Manifest-Spezifikation für Android Chrome angegeben sind.

Warum das nützlich ist: Android Chrome benötigt beide Größen für die korrekte Darstellung des Home-Bildschirm-Symbols und des Splash-Screens. Die Verwendung der standardisierten Dateinamen vermeidet Konfigurationsfehler.

Tipps und Best Practices

Beginnen Sie mit einem quadratischen Bild in 512×512px oder größer. Das Tool skaliert Ihre Eingabe auf jede Zielgröße herunter. Ein größeres quadratisches Quellbild enthält mehr Details auf jeder Skalierungsstufe, was Artefakte bei kleinen Größen wie 16×16 reduziert.

Verwenden Sie ein transparentes PNG für Icons mit geformten Logos. Wenn Ihr Logo eine nicht-rechteckige Form hat (Kreis, Schild oder benutzerdefinierte Kontur), liefern Sie ein PNG mit transparentem Hintergrund. Die transparenten Bereiche übertragen sich auf jedes Favicon, was in Browser-Tabs und auf iOS-Home-Bildschirmen korrekt aussieht.

Prüfen Sie die 16×16-Vorschau vor dem Herunterladen. Das Raster zeigt jede Größe im Anzeigeformat. Die 16×16-Vorschau ist oft am wichtigsten — wenn Ihr Logo-Text bei 16px unleserlich ist, sollten Sie eine einfachere Mark-Version für die kleinsten Größen in Betracht ziehen.

Die Funktion "Alle herunterladen" erstellt ein ZIP-Archiv. Alle generierten Dateien — die 9 PNG-Favicons, die favicon.ico und die site.webmanifest — werden in eine einzelne favicons.zip-Datei gepackt. Dies vermeidet Browser-Download-Limits und hält alle Dateien geordnet in einem Archiv.

JPEG-Eingabe funktioniert, aber transparente Bereiche werden schwarz. Wenn Ihr Quellbild ein JPEG ohne Transparenz ist, haben die Ausgabe-Favicons denselben Hintergrund. Für Icons, die einen transparenten Hintergrund benötigen, verwenden Sie eine PNG-Quelle.

Überprüfen Sie das Download-Verhalten Ihres Browsers. Einige Browser fordern bei jedem einzelnen Download-Vorgang eine Bestätigung an. Wenn Sie 9 Download-Aufforderungen sehen, bestätigen Sie jede. In Chrome mit aktiviertem automatischen Download landen alle 9 Dateien ohne Aufforderung im Download-Ordner.

Häufige Probleme und Fehlerbehebung

Toast "Ladefehler" beim Hochladen. Dies wird vom img.onerror-Handler ausgelöst, wenn der Browser die hochgeladene Datei nicht als Bild dekodieren kann. Stellen Sie sicher, dass Sie eine gültige Bilddatei (JPEG, PNG, WebP, SVG usw.) hochladen. Beschädigte Dateien oder Dateien mit falschen Erweiterungen lösen diesen Fehler aus.

Generierte Favicons wirken bei 16×16 unscharf. Das Tool zeichnet das vollständige Quellbild auf 16×16 Pixel herunterskaliert mit bilinearer Interpolation (der Browser-Standard). Wenn Ihre Quelle eine detaillierte Illustration oder Text enthält, wird das 16×16-Ergebnis unscharf sein. Dies ist eine grundlegende Einschränkung beim Skalieren komplexer Grafiken auf kleine Größen — entwerfen Sie eine vereinfachte Marke für die 16×16- und 32×32-Ziele.

"Alle herunterladen" startet nicht. Die Download-Alle-Funktion erstellt ein ZIP-Archiv via JavaScript. Wenn der Download nicht startet, prüfen Sie, ob Pop-ups und Downloads für die Website erlaubt sind. Sie können auch einzelne Dateien über ihre jeweiligen Download-Schaltflächen herunterladen.

Favicons werden nach der Bereitstellung im Browser nicht aktualisiert. Browser-Favicon-Caching ist aggressiv. Nach der Bereitstellung neuer Favicons erzwingen Sie ein Neu-Laden des Tabs (Ctrl+Shift+R oder Cmd+Shift+R auf dem Mac) oder löschen Sie den Browser-Cache. Das Ändern des Favicon-Dateinamens mit einem Cache-Busting-Query-String (z.B. href="/favicon-32x32.png?v=2") erzwingt ebenfalls eine Aktualisierung.

Das 512×512-Vorschaubild im Raster ist auf 64px begrenzt. Die Rastervorschau begrenzt die Anzeige auf Math.min(size, 64) Pixel, um das Raster kompakt zu halten. Die heruntergeladene Datei ist das korrekte vollständige 512×512px PNG — die kleine Anzeigegröße gilt nur für die Vorschau.

Datenschutz und Sicherheit

Der Favicon Generator läuft vollständig in Ihrem Browser. Ihr Quellbild wird über FileReader.readAsDataURL in ein JavaScript-Image-Objekt geladen und dann auf ein verstecktes Canvas-Element gezeichnet. Es werden keine Bilddaten an externe Server gesendet. Alle neun Ausgabe-Favicons werden lokal aus canvas.toDataURL('image/png') generiert. Dies ist sicher für proprietäre Logos, noch nicht veröffentlichtes Branding und vertrauliche visuelle Assets. Das Tool funktioniert vollständig offline, sobald die Seite geladen wurde.

Häufig gestellte Fragen

Ist der Favicon Generator kostenlos?

Ja, vollständig kostenlos. Es wird kein Konto benötigt, kein Wasserzeichen wird zur Ausgabe hinzugefügt, und es gibt kein Limit für die Anzahl der Favicon-Generierungen. Die für die Verarbeitung verwendete Canvas-API hat keine serverseitigen Kosten.

Funktioniert der Favicon Generator offline?

Ja. Nach dem Laden der Seite verwendet die gesamte Verarbeitung die browsernative Canvas-API und FileReader. Während des Ladens von Bildern, der Favicon-Generierung oder des Downloads werden keine Netzwerkanfragen gestellt. Es funktioniert ohne Internetverbindung.

Sind meine Daten beim Favicon Generator sicher?

Ja. Ihr Bild wird über FileReader in den Browser-Speicher gelesen und auf ein Canvas-Element gezeichnet. Es werden keine Bilddaten den Browser verlassen. Dies ist sicher für unveröffentlichte Logos, vertrauliche Marken-Assets und proprietäre Symbolik.

Welche Größen generiert das Tool?

Das Tool generiert 9 Größen: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192 und 512×512 Pixel. Jede wird als PNG mit dem Standard-Dateinamen für ihren Verwendungszweck gespeichert.

Wie lauten die Standard-Dateinamen für jede Größe?

Die Dateinamen entsprechen Web-Standards: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png und android-chrome-512x512.png.

Generiert das Tool eine .ico-Datei?

Ja. Das Tool generiert automatisch eine favicon.ico-Datei, die die 16, 32 und 48px-Größen als PNGs in einem ICO-Container einbettet. Sie ist bereit für den Einsatz mit <link rel="icon" type="image/x-icon" href="/favicon.ico">. Die ICO-Datei kann einzeln heruntergeladen werden oder ist im ZIP-Archiv "Alle herunterladen" enthalten.

Wofür wird die 96×96-Größe verwendet?

Die 96×96 favicon-96x96.png ist in der Beschreibungsanordnung des Tools als "Google TV-Symbol" gekennzeichnet. Sie wurde historisch für Google TV App-Symbole verwendet und ist der Vollständigkeit halber in einem umfassenden Favicon-Paket enthalten.

Kann ich ein SVG als Quellbild verwenden?

Ja. Die Dateieingabe akzeptiert image/* und moderne Browser können SVG über das <img>-Element dekodieren. Das SVG wird vom Browser gerastert, wenn es auf die Canvas gezeichnet wird. Die Ausgabe ist ein gerastertes PNG — kein Vektor-SVG-Favicon — was für die meisten Anwendungsfälle geeignet ist.

Sollte ich einen transparenten Hintergrund in meinem Quellbild verwenden?

Ja, wenn Ihr Symbol eine geformte Kontur hat. Transparente Hintergründe übertragen sich auf die PNG-Ausgabe. Für Symbole auf iOS-Home-Bildschirmen (apple-touch-icon.png) fügt iOS automatisch abgerundete Ecken hinzu, sodass ein transparenter Hintergrund korrekt aussieht. Für Browser-Tab-Favicons zeigt der Tab-Hintergrund des Browsers durch transparente Bereiche.

Was macht die Schaltfläche "Alle herunterladen" genau?

Sie packt alle generierten Dateien in ein einzelnes favicons.zip-Archiv: die 9 PNG-Favicons, die favicon.ico (enthält 16, 32 und 48px-Größen) und eine site.webmanifest-Datei. Das ZIP wird in Ihrem Browser generiert und als eine Datei heruntergeladen.

Verwandte Tools

• Demnächst verfügbar: SVG in PNG — Konvertieren Sie Ihr SVG-Logo in ein hochauflösendes PNG, bevor Sie es in den Favicon Generator einspeisen.
• Demnächst verfügbar: Bildgrößenänderung — Ändern Sie Ihre Quellgrafik auf ein quadratisches 512×512px, bevor Sie Favicons für die sauberste Ausgabe erstellen.
• Demnächst verfügbar: Platzhalter-Generator — Erstellen Sie Platzhalterbbilder, während Sie auf die endgültigen Marken-Assets warten.
• Demnächst verfügbar: Bildkonverter — Konvertieren Sie die generierten PNG-Favicons in WebP oder andere Formate, wenn Ihre Bereitstellung dies erfordert.

Favicon Generator jetzt testen: Demnächst verfügbar: Glyph Widgets Favicon Generator