Favicon Praxisbericht
geschrieben von Felix Beuster amIn diesem Artikel soll das Favicon thematisiert werden, das kleine Bild, das innerhalb des Tabs oder bei den Lesezeichen mit abgespeichert wird. Von der einstigen Strategie, dass eine favicon.ico ausreicht, haben wir uns dank großer Gerätevielfalt etwas entfernt. Daher hier mal ein Überblick, wie ich auf meinem Blog mit der Situation derzeitig umgehe.
Browserdarstellung, Verknüpfungen und RSS
Ist eine favicon.ico im Root-Verzeichnis der Webseite, freut sich generell jeder Browser, und nimmt diese Datei dankend an. Erfreulich ist, dass viele Browser PNG-Grafiken als Favicon unterstützen, der Internet Explorer gehört leider nicht dazu. Hinzu kommt, dass Chrome und Safari auch bei Vorhandensein eines PNGs die ICO-Grafik bevorzugen.Empfehlenswert sind hier bislang also zwei Dateien. Während ein ICO-Favicon mehrere Größen in einer Datei vereinen kann, ist das bei einem PNG nicht der Fall. Browser können die Grafik aber in verschiedensten Größen nutzen, hier gilt es also abzuwägen, ob man die Skalierung den Browser überlassen möchte, oder selbst Hand anlegt.
Weitergehend wird ein Favicon nicht mehr nur im Browser angezeigt, sondern kann auch als Tile in der Windows Modern UI oder als Verknüpfung auf einem Smartphone dargestellt werden. Bei den Smartphone-Verknüpfungen gibt es ebenfalls verschiedene Größen. Zwar sind die Betriebssysteme in der Lage, selbstständig die Bilder zu skalieren, aber auch hier verliere ich dann Kontrolle über das Bild und es kann mitunter Auswirkungen auf die Leistung auf dem Homescreen haben.
Auch die Tiles in Windows haben, ihr ahnt es, verschiedene Größen, und es besteht auch die Möglichkeit, dass ein Tile als Breitbild dargestellt wird. Riskieren, dass die Grafik unschön skaliert und beschnitten wird, oder doch eine Datei anlegen?
Schlussendlich gibt es noch RSS-Feeds. Leider lässt sich in ihnen nicht zuverlässig eine Grafik angeben. Dafür wird aber auch ihrer Handhabung sehr einfach, in dem eine favicon.ico im Root liegt.
Was nutze ich?
Ein Favicon-Generator hat mir schlussendlich 21 Dateien geliefert, um alle Fälle abzudecken, was mir letztendlich doch zu viel war. Ich habe mich dann für PNGs in vier Größen (96*96, 144*144, 310*310, 310*150), davon eine als Breitbild für Windows und die favicon.ico mit 3 Größen (16*16, 24*24, 32*32) entschieden. Dadurch sind ganz gute Mittelwege entstanden, und den Rest muss sich Browser oder Betriebssystem skalieren. Dennoch komme ich um eine Reihe von HTML nicht umhin, bevor sich Windows denkt, es könne die 96 Pixel auf 310 Pixel ausweiten.1<link rel="shortcut icon" href="/images/favs/favicon.ico">2<link rel="apple-touch-icon" sizes="57x57" href="/images/favs/fav96.png">3<link rel="apple-touch-icon" sizes="114x114" href="/images/favs/fav144.png">4<link rel="apple-touch-icon" sizes="72x72" href="/images/favs/fav96.png">5<link rel="apple-touch-icon" sizes="144x144" href="/images/favs/fav144.png">6<link rel="apple-touch-icon" sizes="60x60" href="/images/favs/fav96.png">7<link rel="apple-touch-icon" sizes="120x120" href="/images/favs/fav144.png">8<link rel="apple-touch-icon" sizes="76x76" href="/images/favs/fav96.png">9<link rel="apple-touch-icon" sizes="152x152" href="/images/favs/fav144.png">10<link rel="icon" type="image/png" href="/images/favs/fav310.png" sizes="196x196">11<link rel="icon" type="image/png" href="/images/favs/fav144.png" sizes="160x160">12<link rel="icon" type="image/png" href="/images/favs/fav96.png" sizes="96x96">13<link rel="icon" type="image/png" href="/images/favs/fav96.png" sizes="32x32">14<link rel="icon" type="image/png" href="/images/favs/fav96.png" sizes="16x16">15<meta name="msapplication-TileColor" content="#1686c6">16<meta name="msapplication-TileImage" content="/images/favs/fav144.png">17<meta name="msapplication-square70x70logo" content="/images/favs/fav96.png">18<meta name="msapplication-square144x144logo" content="/images/favs/fav144.png">19<meta name="msapplication-square150x150logo" content="/images/favs/fav144.png">20<meta name="msapplication-square310x310logo" content="/images/favs/fav310.png">21<meta name="msapplication-wide310x150logo" content="/images/favs/fav310w.png">22<meta name="apple-mobile-web-app-title" content="beuster{se}">Fazit
In Favicons kann man sehr viel Zeit und Optimierung investieren. Zurecht wie ich finde, ist die kleine Grafik doch mit das erste grafische Identifikationsmerkmal einer Webseite in einer Lesezeichenliste, zwischen vielen Tabs oder auf dem Homescreen eines Smartphones. Wer sich mehr in das Thema einarbeiten möchte, sollte sich auch den Artikel von Jonathan T. Neal über Favicons durchlesen. Was ist eure Meinung, ist der Aufwand schon zu viel, oder habe ich vielleicht einen Punkt übersehen? Lasst es mich wissen.Gallerie
Mehr aus Webentwicklung
Ein parr mehr Artikel
Kommentare
Bisher keine Kommentare.Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.