Favicon-Generator
Ein Bild hochladen, jede Favicon-Größe herunterladen — 16 bis 512 px PNGs plus die HTML-Link-Tags. Läuft komplett in Ihrem Browser.
1.160 Aufrufe
Bild konnte nicht gelesen werden — versuchen Sie PNG/JPG/WebP
Die Größen, die 2026 zählen
Unterschiedliche Geräte und Kontexte erwarten jeweils eine andere Favicon-Größe, denn ein Favicon ist keine einzelne Datei — es ist eine Familie von Dateien. Browser-Tabs verwenden winzige 16×16- und 32×32-Pixel-PNGs. iOS' „Zum Home-Bildschirm hinzufügen" nutzt ein 180×180 Pixel großes Apple-Touch-Icon. Android und installierte PWAs holen sich 192×192- und 512×512-Pixel-Icons aus dem Web-App-Manifest für ihre Home-Bildschirm- und Splash-Screen-Grafiken. Ein einzelnes Ausgangsbild kann nicht alle diese Anforderungen direkt erfüllen — ein 512-px-Logo, das direkt auf 16 px gequetscht wird, verliert fast sein gesamtes Detail, und ein auf 16 px verkleinertes Icon, das auf 512 px hochskaliert wird, wirkt verschwommen und blockig. Der richtige Ansatz besteht deshalb darin, eine hochauflösende Quelle einzeln auf jede Zielgröße herunterzurechnen und die Pixel bei jeder Größe frisch neu zu zeichnen, statt eine Ausgabe aus einer anderen zu skalieren.
Genau das macht dieses Tool: Es lädt Ihr Ausgangsbild in Ihrem Browser auf ein HTML-Canvas und verkleinert es auf alle sechs Standardgrößen — 16, 32, 48, 180, 192 und 512 Pixel — jede direkt aus dem Original gezeichnet, und liefert Ihnen anschließend die passenden PNGs samt der <link>-Tags zum Einfügen in den <head> Ihrer Website. Nichts wird hochgeladen; das Verkleinern geschieht mit der Canvas-API auf Ihrem eigenen Gerät.
Gestalten für die kleinste Größe
Weil bei 16 px so viel Detail verloren geht, funktioniert Favicon-Design rückwärts von der kleinsten Größe aus, nicht von der größten. Schneiden Sie auf das Logo-Symbol zu statt auf einen vollständigen Schriftzug — Text wird unterhalb von etwa 24 px zu einem unlesbaren Schmierfleck. Bewahren Sie starken Kontrast gegenüber hellen wie dunklen Tab-Leisten, da Browser zwischen Themes wechseln. Eine deckende Hintergrundfarbe liest sich bei den kleinsten Größen meist besser als Transparenz, wo ein paar halbtransparente Randpixel wie Bildrauschen wirken können. Viele Marken pflegen eine vereinfachte „App-Icon"-Version ihres Logos — einen einzelnen Buchstaben, ein Initial oder ein Symbol — genau deshalb, weil ihr vollständiges Logo den 16-px-Test nicht übersteht.
Es hilft außerdem, die Manifest-Datei zu verstehen, die die 192- und 512-Pixel-Icons für installierbare Websites verknüpft: Das Web-App-Manifest (manifest.json) referenziert diese beiden Größen per URL, damit Android- und Desktop-PWA-Installationsprogramme wissen, welches Icon sie für den Home-Bildschirm und den App-Wechsler abrufen sollen. Websites, die die Manifest-Icons auslassen, funktionieren weiterhin vollständig — die Icons für Browser-Tab und iOS-Home-Bildschirm arbeiten unabhängig davon — aber die Installationsaufforderung selbst greift dann möglicherweise auf ein generisches Icon zurück oder bietet die Installation gar nicht erst an.
Häufig gestellte Fragen
Brauche ich noch eine .ico-Datei?
Selten. Jeder moderne Browser akzeptiert PNG-Favicons, die über das sizes-Attribut in einem Link-Tag deklariert werden. Eine /favicon.ico im Stammverzeichnis zu behalten hilft nur sehr alten User-Agents und Tools, die diesen fest codierten Legacy-Pfad direkt anfragen.
Welches Bild sollte ich hochladen?
Ein quadratisches Bild, idealerweise 512 px oder größer, PNG oder ein aus SVG exportiertes Raster mit zentriertem Symbol und ausreichend Rand darum. Nicht quadratische Bilder werden vor dem Verkleinern mittig quadratisch zugeschnitten, damit nichts gestreckt wird.
Warum wirkt mein Icon bei 16 px unscharf oder matschig?
Sechzehn Pixel können physisch kein feines Detail fassen — dünne Striche, Verläufe und kleiner Text lösen sich zu einer Unschärfe auf. Vereinfachen Sie das Ausgangssymbol, erhöhen Sie den Kontrast, oder gestalten Sie eine eigene Kleinformat-Version, falls Ihr vollständiges Logo das kleinste Tab-Icon nicht übersteht.
Was ist der Unterschied zwischen den 192-px- und 512-px-Icons?
Beide versorgen Android- und PWA-Manifeste: 192 px wird für das Home-Bildschirm-Icon bei normaler Dichte verwendet, während 512 px für hochauflösende Bildschirme und den Splash-Screen genutzt wird, der beim Laden einer PWA angezeigt wird — Android wählt je nach Kontext das passende aus.
Muss ich jede Größe hinzufügen, oder reichen ein paar?
Für eine moderne Website deckt 32 px plus das 180-px-Apple-Touch-Icon die große Mehrheit der Besucher ab. Fügen Sie die 192/512-px-Manifest-Icons nur hinzu, wenn die Website als PWA installierbar sein soll; die Größen 16 und 48 px helfen hauptsächlich in älteren Kontexten.
Ähnliche Tools
Problem melden
Favicon-Generator
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!