Favicon

Klein aber nicht zu übersehen

Helen

Pixelschubser

Der Name „Favicon“ setzt sich aus den englischen Begriffen "favourite" und "icon" zusammen und bezeichnet so eine kleine Grafik, die im Browserfenster in der Adresszeile erscheint, um der Webseite Wiedererkennungswert zu verleihen. Dies ist besonders praktisch beim Anlegen eines Lesezeichens, oder sollten zu viele Tabs geöffnet sein um den vollen Titel der Seite anzuzeigen.


Erstellung eines Favicons    

Zunächst ist es wichtig eine Grafik bzw. ein Logo zu wählen, welches auch in der kleinsten Auflösung von 16 x 16 Pixeln noch gut zu erkennen ist. Die Grundform des Favicons ist daher auch quadratisch, kann aber so gespeichert werden, dass auch runde Formen oder ein transparenter Hintergrund dargestellt werden können. Die Erstellung eines Favicons erfolgt meist über gängige Bildbearbeitungsprogramme wie Photoshop, welche mithilfe von Plug-Ins .ico-Dateien abspeichern können. Andernfalls lassen sich mit Favicon Generatoren Bilder hochladen, welche diese anschließend in allen geläufigen Größen ausgeben. Häufig wird hierbei ebenfalls der zugehörige HTML-Code ausgegeben. Ein alter Trick aus Zeiten ohne Favicon Generator ist das Abspeichern als .png Datei, welche bereits in der richtigen Größe angelegt wurde. Anschließend kann man durch einfache Änderung des Dateinamens eine .ico Datei erstellen.

Andere Dateiformate wie .png oder .gif können ebenfalls gelesen werden, müssen jedoch anders eingebunden werden.

Hierbei ist zu beachten, dass Favicon nicht gleich Favicon ist. Um eine optimale Anzeige zu erreichen, sollten die kleinen Symbole auf den Browser sowie das Endgerät angepasst werden. Mobile Endgeräte erfordern eine höhere Auflösung als für die Darstellung auf dem Desktop. Allgemein ist zu empfehlen, die Grafik anfangs so groß wie möglich oder als Vektordatei zu erstellen, da sie sich so ohne Qualitätsverlust skalieren lässt.  


Favicons für Desktopdarstellung

Größe in PixelBrowser
16x16Alle geläufigen Browser: Google Chrome,
Mozilla Firefox, Internet Explorer, Opera, etc. 
24x34Internet Explorer 9
32x32Retina Displays (Apple)
64x64Safari Reader
max. 310x310

Windows Kacheln 

Es gibt zwei Möglichkeiten eine Verknüpfung zwischen Webseite und Favicon herzustellen. Als favicon.ico Datei wird es automatisch erkannt, wenn es im Rootverzeichnis einer Domain liegt. Da jedoch nicht alle Browser diese Funktion unterstützen ist hiervon abzuraten. Soll die Grafik anders benannt werden oder aus einem anderen Dateiformat bestehen, so muss im <head>-Bereich einer HMTL-Datei angegeben werden: 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Die Standardbezeichnung in HTML ist "icon", für Internet Explorer wird jedoch "shortcut icon" verwendet. Für andere Browser muss das Dateiformat auch nicht .ico heißen, hier können oben genannte Dateien ebenfalls verwendet werden.

 

Favicons für Smartphones

Größe in PixelDarstellung
128x128Google Play Store (Android)
max. 180x180Apple Touch Icons
max. 196Chrome Browser (Android)

 

Die Favicons bei Smartphones werden auch Touch-Icons genannt und benötigen eine höhere Auflösung, daher sollten .png Dateien verwendet werden. Auch hier muss die favicon.ico Datei im Rootverzeichnis liegen. Für Android wird eine höhere Auflösung von 32 x 32 Pixel als favicon.png Datei benötigt.

Damit ein Icon auf Apple-Endgeräten richtig angezeigt wird, muss die Datei apple-touch-icon.png im Rootverzeichnis liegen, um eine 404-Fehlermeldung zu vermeiden. Diese Dateien werden automatisch durch abgerundete Ecken, Schattenwurf sowie Glanz auf die Darstellung von Apple angepasst. Um dies zu vermeiden muss stattdessen apple-touch-icon-precomposed angegeben werden. Die Auflösung sollte hier möglichst bei 180 x 180 Pixel liegen, von älteren Browsern wird die Grafik herunterskaliert. Apple Geräte benötigen zwar keine Referenz im HTML, doch für Android-Geräte ist dies notwendig.

Für die Darstellung auf Windows Tiles sollte die Datei mstile-144x144.png im Rootverzeichnis liegen, kann aber durch browserconfig.xml umgeleitet werden. Die Hintergrundfarbe der Kachel kann durch msapplication-TileColor bestimmt werden.

Im HTML-Code sollte somit stehen:

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
 

 

Möchte man die gezielte Skalierung umgehen, so bietet sich die Verwendung von SVG Grafiken an. Diese lassen sich stufenlos Skalieren und sind somit in der Zukunft immer geläufiger.

<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any"> 

  

Zurück