Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, im Lesezeichen und im Suchergebnis erscheint. Der Name kommt von „favorite icon“ und stammt aus der Zeit, als es nur für Lesezeichen gedacht war.
- Favicon
Kleines Symbol einer Website, das im Browser-Tab, im Lesezeichen und im Suchergebnis erscheint.
Beispiel: „Das Favicon zeigt das Bildzeichen der Marke ohne Schriftzug.“Auch: Browser-Icon oder Website-Icon. Die klassische Datei hieß favicon.ico und lag im Wurzelverzeichnis; heute wird das Symbol im Quelltext angegeben.
Abgrenzung zum Favicon-Set: Das Favicon ist das Symbol selbst. Das Set ist die Gesamtheit der Dateien in allen Größen und Formaten, die Browser und Betriebssysteme anfordern.
Wie es eingebunden wird
Über link-Elemente im Kopfbereich, dazu eine Datei im Wurzelverzeichnis als Rückfallebene für Abrufe, die den Quelltext gar nicht lesen. Zwei bis drei Angaben reichen heute: ein SVG für moderne Browser, ein PNG als Ersatz und ein größeres Symbol für den Startbildschirm.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Wie das Motiv gewählt wird
Bei 16 Pixeln bleibt von einem Logo mit Schriftzug nichts übrig. Taugt nur das Bildzeichen, und auch das in einer vereinfachten Fassung: wenige Formen, kräftiger Kontrast, kein Verlauf und keine dünnen Linien.
Zu prüfen ist das Symbol auf hellem und auf dunklem Grund, weil Browser den Tab je nach Einstellung verschieden einfärben. Ein dunkles Zeichen ohne Hintergrundfläche verschwindet im dunklen Modus.
Woran es scheitert
Am Zwischenspeicher. Browser merken sich das Symbol hartnäckig, weshalb eine Änderung oft tagelang nicht ankommt. Hilfreich ist ein neuer Dateiname statt eines Austauschs unter demselben Namen.
Der zweite Fall ist das fehlende Symbol: Dann zeigt der Tab ein leeres Blatt, und im Suchergebnis steht ein Platzhalter. Aus unserer Arbeit an über 2.500 Website-Projekten gehört das Favicon zu den Punkten, die beim Start am häufigsten übersehen werden, weil es im Entwurf nirgends auftaucht.
Für die Anzeige im Suchergebnis gelten eigene Anforderungen, die Google unter Favicon in der Suche beschreibt: ein Vielfaches von 48 Pixeln, dauerhaft dieselbe Adresse und ein Symbol, das die Marke erkennbar vertritt.