Leitfaden für transparente Favicons
Ein einfarbiger Hintergrund auf einem Favicon wirkt veraltet und kollidiert mit dem Dark Mode. So bleibt der Alphakanal durchgängig erhalten.
Favicons auf jeder Website prüfen
Installieren Sie die FetchFavicon Chrome-Erweiterung, um Favicons sofort zu extrahieren, vorzuschauen und zu validieren.
Mit transparenter Vorlage starten
Exportieren Sie Ihr Logo als PNG-32 ohne Hintergrundfüllung oder als SVG. Die häufigste Ursache für ungewollte Hintergründe ist ein fest eingebranntes Weiß in der Quelldatei – nicht das Favicon-Tool.
.ico unterstützt Alphakanal
PNG-komprimierte Einträge in der .ico behalten ihren Alphakanal. Bitmap-Einträge hingegen nicht – verwenden Sie ein Tool, das pro Größe die richtige Kodierung wählt.
Dark Mode behandeln
Liefern Sie ein SVG mit einem <style>@media (prefers-color-scheme: dark) { ... }</style>-Block aus und lassen Sie die .ico den statischen Fallback übernehmen.
FAQ
How do I make a favicon with a transparent background?
Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.
Does .ico support transparency?
Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.
How do transparent favicons work in dark mode?
Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.