Wie Favicon-Formate funktionieren
Wer versteht, wie die einzelnen Formate arbeiten, kann das unvermeidliche Problem »Mein Favicon wird nicht angezeigt« schnell lösen.
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.