Ein Favicon, das sich an den Dark Mode anpasst
Nur SVG kann auf das Browser-Theme reagieren. Bette ein <style> mit einer prefers-color-scheme-Query direkt in das SVG ein – der Browser wendet es beim Rendern des Icons an. So bleibt ein dunkles Logo auf einer dunklen Tab-Leiste sichtbar:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Binde es als <link rel="icon" href="/icon.svg" type="image/svg+xml"> ein. Behalte daneben eine normale favicon.ico für Browser und die Google-Suche, die die Media-Query nicht ausführen.
Safari-Pinned-Tab-Icon
Wenn jemand deinen Tab im Desktop-Safari anheftet, verwendet es ein separates flaches, einfarbiges SVG (ein „Mask Icon") – reine Form, keine Farbverläufe:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
Das color-Attribut legt den Farbton der Anheftung fest. Exportiere dafür eine monochrome Version deiner Bildmarke; alles mit feinen Details oder mehreren Farben wird als einfarbiger Klecks gerendert.
Maskierbare Icons und die Safe Zone
Androids adaptive Icons schneiden dein Bild je nach Launcher in einen Kreis, ein Squircle oder ein abgerundetes Quadrat. Einem normalen Icon werden die Ecken abgeschnitten. Markiere die Manifest-Icons als maskierbar und halte die wichtigen Inhalte innerhalb der zentralen „Safe Zone" – etwa die mittleren 80 %, also ein Rand von rund 10 % an jeder Seite:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Gestalte mit einer randlosen Hintergrundfarbe und dem Logo bequem innerhalb dieses Rands, damit keine Form hineinschneidet.
theme-color: die Leiste rund um das Icon
Nicht das Favicon selbst, aber es sitzt auf dem Smartphone direkt daneben – theme-color färbt die Browser-Oberfläche/Adressleiste ein. Es kann ebenfalls auf das Theme reagieren:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
Was eine echte .ico tatsächlich enthält
Eine richtige .ico ist ein Container, der mehrere Bitmaps gleichzeitig enthält – typischerweise 16, 32 und 48 Pixel. Der Browser wählt die Größe, die er für die jeweilige Oberfläche braucht (Tab vs. Lesezeichenleiste vs. Windows-Verknüpfung), sodass er nie ein 16-px-Bild hochskalieren oder ein 512-px-Bild herunterskalieren muss. Eine „favicon.ico", die in Wirklichkeit nur ein umbenanntes PNG ist, verliert das und sieht bei manchen Größen weich aus. Dieser Generator schreibt eine echte Multi-Size-ICO.
Favicon-Regeln der Google-Suche
Damit dein Icon neben deinem Ergebnis erscheint, verlangt Google alles Folgende: Das Favicon liegt unter einer gleichbleibenden URL; es ist quadratisch und ein Vielfaches von 48×48 (48, 96, 144…); es liegt auf demselben Host wie die Seite; die Seite, die es hostet, ist indexierbar; und das Icon ist optisch klar. Google ruft es mit dem eigenen Crawler ab und cacht es getrennt von der Seite – rechne nach einer Änderung also mit Tagen bis Wochen und stelle sicher, dass /favicon.ico dem Googlebot 200 zurückgibt.
Halte die Dateien klein
- SVG: Entferne Editor-Metadaten und Kommentare; ein sauberes Icon-SVG ist oft unter 1 KB groß.
- ICO: nur 16/32/48 – verzichte auf 64/128/256, die die Datei ohne Nutzen aufblähen.
- PNG: Das 512-Icon ist das schwerste; jage es durch einen verlustfreien Optimierer.
Teste es dort, wo es tatsächlich erscheint
Verlass dich nicht auf einen einzigen Browser. Prüfe: einen normalen Tab (hell und dunkel), ein Lesezeichen, ein iOS-„Zum Home-Bildschirm", eine Android-Installation und das Google-Ergebnis, sobald es neu gecrawlt wurde. Ein schneller Weg, beim Testen ein sauberes Ergebnis zu erzwingen, ist ein privates Fenster plus ein ?v=-Parameter an den Icon-URLs.