Wie Favicon-Formate funktionieren
Wer versteht, wie die einzelnen Formate arbeiten, kann das unvermeidliche Problem »Mein Favicon wird nicht angezeigt« schnell lösen.
Favicons auf jeder Website prüfen
Installieren Sie die FetchFavicon Chrome-Erweiterung, um Favicons sofort zu extrahieren, vorzuschauen und zu validieren.
Der .ico-Container
Eine .ico-Datei besteht aus einem Header gefolgt von einem oder mehreren Bildeinträgen. Jeder Eintrag kann BMP oder PNG sein und besitzt eine definierte Breite, Höhe und Farbtiefe.
Browser parsen das Verzeichnis, wählen den Eintrag, der der angeforderten Größe am nächsten kommt, und dekodieren nur diesen.
PNG innerhalb von .ico
Ab 64×64 reduziert PNG-Komprimierung die Dateigröße um das 5- bis 10-Fache ohne visuellen Verlust. Moderne Generatoren (unserer eingeschlossen) wenden das automatisch an.
SVG-Favicons
Ein SVG-Favicon ist eine ganz normale SVG-Datei. Browser rendern sie wie jedes andere SVG – und der <style>-Block kann Farben per prefers-color-scheme anpassen.
So wählen Browser aus
Bei mehreren <link rel="icon">-Tags wählt der Browser das Tag, das am besten zur jeweiligen Oberfläche passt (Tab vs. Lesezeichen vs. Installation). SVG wird bevorzugt, wenn unterstützt; .ico dient als Fallback.
FAQ
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.