Favicons – Best Practice Guideline

Jeder kennt die kleinen 16 x 16 Pixel Grafiken im *.ico Format, die in der Adresszeile des Webbrowsers angezeigt werden. Doch 16 x 16 Pixel ist schon lange überholt und es gibt für verschiedene Geräte und Anwendungszwecke unterschiedliche Implementierungen.

In diesem Artikel möchte ich euch die „Best Practices“ für die Implementierung von Favicons, Touch-Icons und Windows Tile-Icons vorstellen.

Favicons sind mittlerweile viel mehr, als die kleinen Grafiken in der Adresszeile des Browsers. Denn diese Grafiken finden mittlerweile an ganz unterschiedlichen Stellen eine Anwendung, weshalb 16 x 16 als Größe auch nicht mehr ausreichend ist.

Hier nur ein paar wenige Beispiele, wo wir einem Favicons mittlerweile im Alltag begegnen können, natürlich neben der offensichtlichen und hauptsächlichen Verwendung als Favoriten-Grafik im Browser.

• Avatar im E-Mail Programm bei Mails von der Domain
• Vorschaubild für den RSS-Feed in Feed-Readern
• Icon bei Bookmarks auf Home-Screen (z.B. iOS)
• Tile-Icons für Bookmarks in der Metro-Oberfläche
• Vorschaubild in Link-Sammlungen
• usw.

Theoretisch kann jeder Dienst, der irgendetwas mit eurer Webseite zu tun hat, das Favicon sinnvoll nutzen. Das funktioniert jedoch nur dann, wenn die Favicons auch in einer ausreichenden Größe und korrekt eingebunden sind.

Folgende Kombination aus Bildformaten und Größen hat sich als sinnvolle Lösung für die meisten Webseiten, Anwendungen und Geräte ergeben:

• Standard Favicon im .ico Format mit 32 x 32 Pixeln
• Favicon als PNG-Datei mit mindestens 96 x 96 Pixeln oder größer
• Apple Touch-Icons im PNG-Format mit Auflösungen zwischen 60 x 60 Pixeln bis 152 x 152 Pixeln (Details siehe unten beim Code-Beispiel)
• Windows 8 Tile-Icon als PNG-Datei mit 144 x 144 Pixeln

Das Standard-Favicon im *.ico Format wird hauptsächlich als Fallback für den InternetExplorer verwendet und daher mit Conditional Comments ausgeliefert.

Wenn alle Bilder vorhanden sind, werden die Favicons wie folgt eingebunden:

<!-- Hintergrundfarbe für Windows 8 Tile-Icon -->
<meta name="msapplication-TileColor" content="#3d5064" />
<!-- Windows 8 Tile-Icon: 144 x 144 Pixel -->
<meta name="msapplication-TileImage" content="/img/tileicon.png" />

<!-- Apple Touch Icon - iPhone: 60 x 60 Pixel -->
<link rel="apple-touch-icon" href="/img/touch-icon-iphone.png" />
<!-- Apple Touch Icon - iPad: 76 x 76 Pixel -->
<link rel="apple-touch-icon" sizes="76x76" href="/img/touch-icon-ipad.png" />
<!-- Apple Touch Icon - iPhone Retina: 120 x 120 Pixel -->
<link rel="apple-touch-icon" sizes="120x120" href="/img/touch-icon-iphone-retina.png" />
<!-- Apple Touch Icon - iPad Retina: 152 x 152 Pixel -->
<link rel="apple-touch-icon" sizes="152x152" href="/img/touch-icon-ipad-retina.png" />

<!-- Standard-Favicon als PNG mit mindestens 96 x 96 Pixeln -->
<link rel="icon" href="/img/favicon.png" type="image/png" />

<!-- Favicon im .ico Format als IE Fallback mit 32 x 32 Pixeln -->
<!--[if IE]>
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
<![endif]-->

Wenn alle Icons aus der Liste bzw. dem Code oben eingebunden sind, dann sollten problemlos die wichtigsten Geräte und Software unterstützt werden. Falls die Bildbearbeitungssoftware eures Vertrauens keine .ico Dateien speichern kann, können auch Online-Tools wie favicon-generator.org verwendet werden.