Ein Favicon ist nicht länger ein einzelnes Bild – es ist ein Satz von mindestens sechs bis zehn großen Assets plus einem ICO-Container, einem Webmanifest und mehreren HTML-Zeilen. Für eine Website, die auf allen Browser-Tabs, Apple-Geräten, Android-Startbildschirmen, Windows-Startmenükacheln und PWA-Startbildschirmen gut aussieht, ist es wichtig, sie alle richtig zu machen. In den folgenden Abschnitten wird erläutert, warum moderne Favicons mehrere Größen benötigen, welche Unterschiede zwischen den Symbolformaten PNG, ICO und SVG bestehen und welche spezifischen HTML- und Manifest-Teile dafür sorgen, dass alles auf allen Plattformen korrekt zusammenarbeitet.
Warum moderne Favicons mehrere Größen benötigen
Die Zeit der Single-File-Favicons endete etwa 2010, als iOS und Android damit begannen, Websites als erstklassige Homescreen-Bürger zu bewerben. Heutzutage verlangen verschiedene Plattformen unterschiedliche Größen für unterschiedliche Kontexte, und die Bereitstellung der falschen Größe führt zu sichtbar schlechten Ergebnissen – verschwommene Pixelverdoppelung auf Retina-Displays, abgeschnittene Grafiken auf iOS-Startbildschirmen oder völlig fehlende Symbole auf Windows-Startmenükacheln. Die für eine moderne Website festgelegte Mindestabdeckung: 16×16 für Browser-Tabs (der ursprüngliche Favicon-Anwendungsfall), 32×32 für Browser-Lesezeichen und Retina-Tabs, 48×48 für Windows-Desktop-Verknüpfungen, 180×180 für iOS-Startbildschirme (Apple Touch-Symbol, automatisch auf ein abgerundetes Quadrat zugeschnitten), 192×192 für Android-Startbildschirme (nicht zugeschnitten, verwenden Sie absichtlich transparente oder einfarbige Hintergründe) und 512×512 für PWA-Begrüßungsbildschirme beim ersten Start. Bei jeder Größe handelt es sich um eine unabhängige PNG-Datei und nicht um ein einzelnes skaliertes Bild – bei 16×16 erzeugt das Standard-Resampling des Browsers weiche, matschige Symbole, die nicht sauber gelesen werden können. Dieses Tool generiert jede Größe als unabhängiges PNG; Da die Canvas-API jedes Ziel automatisch neu abtastet, sind einfache Quellgrafiken mit hohem Kontrast besonders bei kleinsten Größen hilfreich. Die Kosten belaufen sich auf ein paar Dutzend Kilobyte zusätzlicher Assets, was im Vergleich zur optischen Verbesserung vernachlässigbar ist.
PNG vs. ICO vs. SVG: Wann welches zu verwenden ist
In modernen Browsern existieren drei Favicon-Formate nebeneinander, und jedes hat spezifische Anwendungsfälle, die für eine vollständige Implementierung wichtig sind. PNG ist die moderne Standardauswahl: Es unterstützt Transparenz, wird universell gerendert und Browser können aus mehreren „“-Tags in verschiedenen Größen auswählen. Verwenden Sie PNG für jedes Symbol pro Größe in Ihrem HTML. ICO ist ein veraltetes Format, das mehrere Größen in einer Containerdatei bündelt, und es bleibt aus einem bestimmten Grund wichtig: Browser fordern automatisch „/favicon.ico“ im Stammverzeichnis der Website an, unabhängig davon, ob Sie ein „“-Tag in Ihren HTML-Code einfügen. Platzieren Sie als ultimativen Fallback ein ICO in mehreren Größen mit 16×16-, 32×32- und 48×48-Bildern im Stammverzeichnis Ihrer Website, damit auch Seiten, die keine Favicon-Links enthalten, dennoch ein richtiges Symbol erhalten. SVG-Favicons sind eine neuere Ergänzung (Chrome unterstützte sie im Jahr 2021), die theoretisch die Skalierung mehrerer Größen durch die Bereitstellung von Vektorgrafiken löst – die SVG-Unterstützung in Browsern ist jedoch für das Rendern von Symbolen immer noch inkonsistent, und insbesondere iOS Safari unterstützt sie noch nicht. Verwenden Sie SVG als optionale Erweiterung über ein „type="image/svg+xml"`-Link-Tag, liefern Sie jedoch immer PNGs und ein ICO als kanonischen Satz. Best Practice: Verwenden Sie PNG für Ihren primären Favicon-Satz, fügen Sie ein favicon.ico im Stammverzeichnis für Legacy- und No-Markup-Fallback ein und fügen Sie optional SVG als progressive Erweiterung für Browser hinzu, die es unterstützen.
Die HTML- und Manifest-Teile, die alles zusammenhalten
Die generierten Symbole sind ohne die richtigen HTML- und Manifest-Tags, die Browser auf sie verweisen, nutzlos. Der minimale HTML-Block für eine vollständige Abdeckung: `` und ähnlich für andere Größen, `` für iOS-Startbildschirme, `` für das Web-App-Manifest und `
` plus `` für Windows-Kacheln. Dieses Tool generiert all dies auf der Registerkarte „HTML-Snippet“, sodass Sie den vollständigen Block direkt in den Kopf Ihrer Seite einfügen können. Die Datei „site.webmanifest“ selbst ist ein JSON-Dokument mit Feldern für den App-Namen, den Kurznamen (für Symbole mit begrenztem Textraum), das Symbolarray (Pfade + Größen + MIME-Typen), die Themenfarbe (beeinflusst das Chrom der Browser-Benutzeroberfläche), die Hintergrundfarbe (wird auf dem PWA-Begrüßungsbildschirm verwendet), die Anzeige („Standalone“ für ein PWA-ähnliches Erscheinungsbild) und die Start-URL. Ohne dieses Manifest bietet Chrome auf Android nicht die PWA-Installationsaufforderung „Zum Startbildschirm hinzufügen“ mit Ihrem benutzerdefinierten Symbol an – es wird auf die Browser-Standardeinstellung zurückgegriffen. Die Registerkarte „Manifest“ in diesem Tool generiert automatisch ein korrektes Manifest aus Ihrem Symbolsatz und Ihren Designoptionen.