Wer kennt sie nicht, die winzigen und manchmal niedlichen Favicons, die einem der Browser in den Tabs oder neben den Bookmarks anzeigt. Bei den Favicons der eigenen Seite fragt man sich vielleicht mal, ob man da noch optimieren kann. Aber in einem Blogpost haben Adam, Nathan und Patrick die Favicons der Tranco Top 100.000 Websites untersucht und da fallen doch einige Schnitzer auf.
Zahlen, Zahlen, Zahlen
Auch Favicons zu laden kostet Zeit und verbraucht Bandbreite. Der durchschnittliche Request braucht 130ms, bei den Top 1.000 Seiten aber nur durchschnittlich 80ms. Das größte Favicon war 7MB wobei die Median-Größe 1,9kB ist. Allerdings hatte auch Discord ein 280kB großes Favicon. Das kleinste ist nur 112 Bytes groß.
Über 50% aller Webseiten hatten mindestens ein Favicon mit einer Auflösung von 128x128 und immer noch 18% eines mit 256x256. Ohne Worte bin ich bei dem Favicon der Lufthansa, das 7087x5197 Pixel hat. Die NFL kommt immerhin noch auf 2000x2000.
Dateien im ICO-Format können mehrere Bilder in unterschiedlichen Größen enthalten, so dass der Browser für den jeweiligen Anwendungszweck das passende finden kann. 56% der Favicons im ICO-Format machen davon gebrauch. Der Rekord liegt hier bei 20 Bildern in einer Datei.
Bei den Bildformaten liegt PNG mit über 71% weit vorne. Selbst 21% der /favicon.ico-Dateien sind PNGs. Bei Apple-Touch-Icons spielt PNG aber so gut wie gar keine Rolle. Ansonsten finden sich wenige BMP- und SVG-Bilder und sogar eine Photoshop PSD, die behauptet eine PNG zu sein.
Favicons mittels eines link-Tags anzugeben hat auch so seine Tücken. 6,7% aller Einträge enthielten Fehler. Entweder war die Größenangabe falsch oder das angegebene Bildformat stimmte nicht. Zum Glück sind diese Angaben nur als Hinweis zu sehen und können vom Browser ignoriert werden. Einige wenige (0,2%) der Seiten enthielten direkt das Favicon in einer Data-URL. Die größte Favicon, das in eine solche URL eingebettet war, brachte es auf stattliche 140kB.
Worauf solltest Du also achten?
Favicons sollten natürlich so wenig Bandbreite wie möglich beanspruchen. Um auf mehrere Favicons in verschiedenen Größen zu verzichten, bietet sich an, entweder SVG als Format zu verwenden oder beispielsweise 256x256 als Größe zu wählen und es dem Browser zu überlassen, das Bild entsprechend zu skalieren. Weiterhin sollte man natürlich die üblichen Mittel anwenden, um die Dateigröße zu reduzieren, also zum Beispiel Programme wie OptiPNG oder pngcrush nutzen.