Wie man ein Favicon für die Website erstellt

“Ein Favicon erstellen” klingt nach einer Datei, und 1999 war es das auch: ein 16×16 favicon.ico im Website-Stammverzeichnis. 2026 ist ein vollständiges Favicon eine kleine Dateisammlung — ein ICO für veraltete und Root-Fallback-Anfragen, ein PNG für iOS-Homescreens, zwei PNGs für das Web-App-Manifest und optional ein SVG, das jede Größe und den Dark Mode auf einmal abdeckt. Die gute Nachricht: Die Sammlung ist klein, das Head-Markup sind vier Zeilen, und alles leitet sich aus einem Quellbild ab.

Welche Größen 2026 tatsächlich zählen

Favicon-Ratgeberseiten lieben 30-zeilige Checklisten mit Größen für Browser, die es nicht mehr gibt. Der Satz, den aktuelle Plattformen tatsächlich laden:

• 16×16 und 32×32, innerhalb von favicon.ico — Browser-Tabs, Lesezeichenleiste, Verlauf. 16px ist, was die meisten Tabs rendern; 32px deckt hochauflösende Displays und Windows-Taskleisten-Pins ab. Beide in ein ICO zu packen ist die übliche und sicherste Auslieferung.
• 180×180-PNG, apple-touch-icon — was iOS nutzt, wenn jemand Ihre Website zum Homescreen hinzufügt, und was Safari in Favoriten und Freigabemenüs zeigt. iOS ignoriert hier ICO und SVG; dies muss ein PNG sein.
• 192×192- und 512×512-PNG, im Manifest — deklariert in manifest.webmanifest, nicht in einem Link-Tag. Android und Desktop-Chrome nutzen 192px für Homescreen-Icons und benötigen 512px für den Installations-Splashscreen; beide sind die Grundlage dafür, dass eine Website als installierbar gilt.

Das war’s. Größen wie 57, 76, 114 und 152 gehören zu ausrangierten iOS-Generationen, die alle das 180px-Icon problemlos herunterskalieren. Sie auszuliefern erzeugt zusätzliche Anfragen, nicht Kompatibilität.

ICO vs. PNG: warum beide noch existieren

ICO ist ein Containerformat: eine einzige .ico-Datei enthält mehrere Bilder in unterschiedlichen Größen, und der Browser wählt die beste Übereinstimmung. Das, plus Historie, ist der Grund für sein Fortbestehen. Deklariert eine Seite gar kein Icon, fragen Browser aus eigener Initiative /favicon.ico im Website-Stammverzeichnis an — der WHATWG-HTML-Standard dokumentiert diesen Fallback — und etliche Nicht-Browser-Clients (Feed-Reader, Link-Vorschau- Dienste, Crawler) fragen genau diesen Pfad an, ohne je Ihr HTML zu parsen. Ein ICO auf Root-Ebene ist das einzige Icon, das ganz ohne Markup funktioniert.

PNG gewinnt überall dort, wo eine einzelne explizite Größe deklariert wird: Es komprimiert besser, jedes Tool exportiert es, und sowohl apple-touch-icon als auch Manifest-Icons benötigen es. Die Antwort auf “ICO oder PNG?” lautet also: ein ICO im Stammverzeichnis, PNG für alles andere. (Für einen umfassenderen Blick darauf, wann PNG überhaupt das richtige Rasterformat ist, siehe PNG vs. JPG vs. WebP.)

SVG-Favicons: eine Datei, fast jede Größe

Chromium-Browser und Firefox akzeptieren <link rel="icon" href="/icon.svg" type="image/svg+xml">. Ein SVG-Favicon ist auflösungsunabhängig, meist kleiner als ein Multi-Größen-ICO und — einzigartig — kann einen <style>-Block mit einer prefers-color-scheme-Media-Query tragen, sodass sich das Icon gegenüber dunklen Tab-Leisten selbst umfärbt. Kein Rasterformat kann das.

Der Haken ist Safari: Seine SVG-Favicon-Unterstützung kam spät und ist lückenhaft, und iOS nutzt SVG für Touch-Icons nie. SVG ist also eine Erweiterung, kein Ersatz — deklarieren Sie es zuerst und behalten Sie das ICO als Fallback. Browser, die SVG verstehen, nutzen es; der Rest fällt durch. Liegt Ihr Logo bereits als SVG vor, haben Sie zudem die ideale Favicon-Quelle: Rendern Sie es mit einem SVG-zu-PNG-Umrechner auf scharfe PNGs in genau den oben genannten Größen, statt einen Raster-Export hochzuskalieren.

Wie man den Satz aus einem Bild erzeugt

Starten Sie mit einer quadratischen Quelle von mindestens 512×512, oder einem SVG. Gestalten Sie für das kleine Ende: Ein Favicon wird bei 16 Pixeln beurteilt, wo dünne Linien, Verläufe und Wortmarken zu Matsch werden. Starke Silhouette, hoher Kontrast, minimale Details. Skalieren Sie dann die Quelle auf jede Zielgröße herunter — 180, 192, 512 als PNGs, 16 und 32 gepackt ins ICO. Jede Größe sollte aus dem großen Original neu abgetastet werden, nicht aus einer anderen kleinen Größe, damit Kanten scharf bleiben — dasselbe Prinzip wird in Bilder ohne Qualitätsverlust verkleinern behandelt.

Es von Hand zu machen funktioniert auch — jeder anständige Bildeditor exportiert die PNGs, und ImageMagick baut das ICO (magick icon-512.png -define icon:auto-resize=32,16 favicon.ico) —, aber ein Generator existiert genau deshalb, weil fünf Exporte und ein Containerformat einmal richtig hinzubekommen mühsam ist, geschweige denn jedes Mal, wenn sich das Logo ändert.

Das minimale Head-Markup, das alles abdeckt

Vier Deklarationen, plus eine Datei, die keine benötigt:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Die Manifest-Datei listet dann die 192- und 512-PNGs in ihrem icons-Array. Verzichten Sie auf SVG, lassen Sie die erste Zeile weg; verzichten Sie auf PWA-Unterstützung, lassen Sie die letzte weg. Das sizes="32x32" in der ICO-Zeile ist ein pragmatischer Hinweis, der verhindert, dass manche Chromium-Versionen das ICO gegenüber dem SVG bevorzugen. Und unabhängig vom Markup: Halten Sie favicon.ico physisch im Website-Stammverzeichnis für alles, was Ihr HTML nie liest.

Dark Mode

Browser-Tab-Leisten kommen hell und dunkel, und ein nahezu schwarzes Logo verschwindet in einem dunklen Theme. Zwei Strategien: der obige SVG-Media-Query-Trick, der Farben automatisch in Browsern austauscht, die SVG-Favicons akzeptieren; oder — alle Formate abdeckend — defensiv gestalten, dem Motiv eine kontrastierende Umrandung, eine gefüllte Hintergrundform oder eine mittlere Farbpalette geben, die auf beiden lesbar ist. Die meisten großen Websites machen Zweiteres, weil ICO und PNG so oder so an viele Clients ausgeliefert werden.

Häufige Fehler

• Ein 16px-Quellbild hochskalieren. Der klassische Fehler: Jemand findet ein altes favicon.ico, bläst es für das Manifest auf 512px auf und liefert ein verschwommenes Installations-Icon aus. Die Erzeugung funktioniert nur bergab — immer vom größten Original aus.
• Fehlendes apple-touch-icon. Ohne es rendert iOS einen Miniatur-Screenshot Ihrer Seite als Homescreen-Icon. Es ist die am häufigsten vergessene Datei, weil Desktop-Tests sie nie zutage fördern.
• Keine favicon.ico im Root. Link-Tags decken Browser ab, aber die stillen /favicon.ico-Anfragen von Bots und älteren Clients liefern 404 — laut in Logs und iconlos in Feed-Readern.
• Transparente Icons, die eine helle Tab-Leiste voraussetzen. Testen Sie die 16px-Darstellung in einem dunklen Theme, bevor Sie ausliefern.
• Cache-Busting vergessen. Browser cachen Favicons aggressiv. Nach einem Redesign ändern Sie den Dateinamen oder fügen einen Query-String hinzu, sonst starren Sie wochenlang auf das alte Icon.

Kurzfassung: ein 512px-Quellbild; 16/32 in ein ICO im Stammverzeichnis erzeugen, ein 180px-apple-touch-icon und 192/512-Manifest-PNGs; optional mit einem SVG für Schärfe und Dark Mode voranstellen; vier Zeilen Head-Markup. Zwanzig Minuten, einmal — und jeder Tab, jedes Lesezeichen, jeder Homescreen und jede Installationsaufforderung zeigt Ihr Motiv statt eines grauen Globus.