Für einen Besitzer eines Onlineshops oder einer Webseite gehört es dazu auf die kleinsten Details zu achten und in unserem heutigen Blogbeitrag geht es um das kleine Detail Favicon.
Ein Favicon kann an unterschiedlichen Stellen im Browser angezeigt werden. Im Tab, in der URL-Leiste oder als Symbol bei den Lesezeichen/Favoriten. In der mobilen Ansicht von Google wird das Favicon ebenfalls angezeigt. Natürlich soll das Favicon in jedem Fall immer an diesen Stellen angezeigt werden. Dazu ist es wichtig die richtige Größe im Code zu hinterlegen.
Ich möchte Dir hier einen kleinen Überblick geben, welche Größen für welchen Browser bzw. Betriebssystem benötigt werden.
Wie binde ich das Favicon ein?
Das Favicon wird im der Seite festgelegt. Dazu muss für jedes Favicon ein tag verwendet werden. Der Code sollte wie folgt aussehen:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Das rel-Attribute gibt an, dass es sich um ein Icon handelt. Das type-Attribute gibt an, dass es sich um ein Bild/png handelt. Das sizes-Attribute ist vor allem dann wichtig, wenn unterschiedliche Größen angeben werden. Zu guter Letzt das href-Attribute um den Pfad des Icons anzugeben. Hier ist darauf zu achten, dass der korrekte Bildname und der korrekte Pfad angegeben werden.
Favicon für moderne Browser
Im Browser wird das Favicon an den oben bereits erwähnten Stellen angezeigt. An all diesen Stellen wird das Favicon in einer Größe von 16x16px angezeigt. Um für hochauflösende Bildschirm eine optimale Darstellung zu ermöglichen empfiehlt es sich ein Icon mit der Größe 32x32px einzusetzen.
Daher liegt es nahe 2 Favicons mit unterschiedlichen Größen in den Code einzubinden.
<link rel=“icon“ type=“image/png” sizes=”16x16” href=”/favicon-16x16.png”>
<link rel=“icon“ type=“image/png” sizes=”32x32” href=”/favicon-32x32.png”>Favicon für Google und Android
Bei Google erscheint das Favicon neben den jeweiligen Suchergebnissen, dabei verwendet Google an dieser Stelle ein Icon mit der Größe 48x48px.
Die Größe 16x16px zu verwenden ist nicht empfehlenswert, da diese nicht von Google ausgegeben wird. Google gibt in seiner Dokumentation speziell an, dass nur Icons der Größe 48x48px oder ein Vielfaches davon genutzt werden.
Die vorgegebene Größe von 48x48px ist ebenfalls die Icon-Größe von Apps auf dem Android Startbildschirm. Als Besitzer einer Webseite oder eines Onlineshops ist dieses Wissen interessant für den Fall, dass ein Nutzer einen Shortcut der Seite auf dem Startbildschirm speichert. Um einer hohen Bildschirm-Auflösung gerecht werden zu können, ist es empfehlenswert neben der Größe 48x48px ebenfalls die Größe 192x192px im Code zu hinterlegen. Sollte mal eine Zwischengröße benötigt werden lässt sich 192x192px ohne Probleme kleiner skalieren, da es ein Vielfaches von 48×48 ist.
<link rel=“icon“ type=“image/png” sizes=”48x48” href=”/favicon-48x48.png”>
<link rel=“icon“ type=“image/png” sizes=”192x192” href=”/favicon-192x192.png”>
Favicon für Apple
Apple nutzt unterschiedliche Icon-Größen für ihre Ausgabegeräte. So wird für das iPhone die Größe 60×60 verwendet. Für das iPad beträgt die Icon-Größe 83,5×83,5px. Da alle Apple-Geräte der letzten Jahre mit Retina oder Super Retina Displays ausgestattet sind, empfiehlt es sich hier ebenfalls mit einem Vielfachen der Größe zu arbeiten. Auch hier ist es das Ziel eine optimale Darstellung zu ermöglichen.
So sollte für iPhones die Größe 180x180px und für iPads die Größe 167x167px verwendet werden.
Wie es so typisch für Apple ist, gibt es hier noch eine Besonderheit für den Code. Anstelle von rel=“icon“ muss hier „rel=“apple-touch-icon“ verwendet werden.
<link rel=“apple-touch-icon“ type=“image/png” sizes=”180x180” href=”/favicon-180x180.png”>
<link rel=“apple-touch-icon“ type=“image/png” sizes=”167x167” href=”/favicon-167x167.png”>Eine Favicon-Übersicht
In dieser Übersicht findest Du alle unterschiedlichen Favicon-Größen auf einen Blick.
| Favicon-Größe in Pixel | |
| Moderne Browser | 16×16 32×32 |
| Google und Android | 48×48 192×192 |
| Apple | 180×180 167×167 |
Nachfolgend siehst Du die einzelnen Codes zusammengefasst. Dieser Code ist ein Beispiel von LENZ eBusiness und dieser wird für die Webseite eingesetzt.
<link rel="icon" type="image/png" sizes="32x32" href="/files/lenz-ebusiness/theme/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/files/lenz-ebusiness/theme/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/files/lenz-ebusiness/theme/img/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="/files/lenz-ebusiness/theme/img/favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="/files/lenz-ebusiness/theme/img/favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/files/lenz-ebusiness/theme/img/favicon-180x180.png">
