Favicons und Touch-Icons optimal einbinden
Ein favicon.ico sollte jede Website enthalten. Doch mittlerweile dient das Icon nicht nur seiner ursprünglicher Verwendung als Favoriten-Icon. Das Icon wird z.B. auch für das Anpinnen von Webseiten in Windows 7/8 verwendet. Des Weiteren sollten Sie in einer Website, bei der auch Besucher mit mobilen Geräten zu erwarten sind, ein Touch-Icon einbinden. Doch wie können Sie mit möglichst geringem Aufwand möglichst viele Anwendungsfälle abdecken?
Favicon und Touch-Icon für verschiedene Browser / Geräte bereitstellen
Wenn Sie alle aktuellen Anwendungsfälle individuell abdecken wollen, müssen Sie deutlich mehr als ein favicon und ein touch-icon einbinden. Des Weiteren besteht nur auch die Möglichkeit, favicons als PNG mit Transparenzen und einer höheren Farbtiefe oder als animiertes GIF zu verwenden. Diese werden allerdings nicht von allen (älteren) Browsern unterstützt.
Eine Maximalbestückung würde in etwa so aussehen:
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
// iPad Retina displays bis iOS7
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
// iPhone Retina displays ab iOS7
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
// iPhone Retina displays bis iOS7
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
// iPad Bildschirm-Icon ab iOS7
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
// iPad Bildschirm-Icon bis iOS6
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
// iPhone und iPod Bildschirm-Icon ohne Retina
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
// Standard Touch icon für Android-Geräte oder bei Verzicht auf Glanzeffekt und abgerundete Ecken
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png" />
// Icon zur Darstellung in der Taskleiste bei Windows 7/8
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
// Icon für das Anpinnen der Webseiten ab IE9 bei Windows 7/8
<link rel="icon" type="image/png" href="/favicon-24.png" sizes="24x24" />
// Standard Favoriten icon für moderne Browser
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16" />
// Standard Favoriten icon, welches auch ältere Browser anzeigen
<link rel="shortcut icon" href="/favicon.ico" />
Ich würde niemand empfehlen, für ein favicon oder ein touch-icon den Seitenheader so aufzublähen. Ziel muss es sein, mit möglichst geringem Overhead, die meisten Anwendungsfälle abzudecken.
Favicon und Touch-Icon: Reduzierung auf das Notwendigste
Das Standard-Favicon wird von den meisten Browsern im Root-Verzeichnis der Website unter dem Namen favicon.ico gesucht. Da aber nicht alle Browser automatisch im Root-Verzeichnis nach solch einer Datei suchen, sollten Sie sicherheitshalber auf das Icon im Seiten-Header verlinken. Sie können ein Favicon verwenden, in dem mehrere Auflösungen enthalten sind (z.B. 16x16, 24x24 und 32x32). Alternativ können Sie ein Favicon in der Größe 32x32 verwenden. Die Browser passen das Favicon auf die richtige Größe an. Auch wenn mittlerweile .png-Icons möglich sind, würde ich weiterhin ein .ico aus Gründen der Abwärtskompatibilität bevorzugen.
Die i-Geräte (iPhone, iPad, iPod) sucht ebenfalls das Favicon (in diesem Fall Touch-Icon) im Root-Verzeichnis der Website unter dem Namen apple-touch-icon.png. Hier wäre eine 152x152 Pixel .png-Datei im Rootverzeichnis die beste Lösung. Die mobilen Geräte passen das Icon auf die entsprechende Größe an. Um die abgerundeten Ecken und den Glanzeffekt müssen Sie sich nicht kümmern. Das schaffen die i-Geräte selbst. Wenn Sie die abgerundeten Ecken und den Glanzeffekt nicht wünschen, so fügen Sie das Icon als apple-touch-icon-precomposed.png ein. Diese Effekte werden durch -precomposed unterbunden.
Um auch die Android-Geräte abzudecken, wird ebenfalls im Rootverzeichnis der Website ein Icon unter dem Namen apple-touch-icon-precomposed.png abgelegt. Allerdings ist zusätzlich eine Verlinkung im Seiten-Header nötig.
Somit würde folgende Minimalkonfiguration im Seiten-Header völlig ausreichen:
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png" />
Performanceoptimierte Einbindung
Komprimieren Sie Ihre Favicons und Touch-Icons, um das Übertragungsvolumen zu reduzieren. Cachen Sie die Icons über einen Eintrag in der .htaccess, um ein unnötiges häufiges Laden zu vermeiden.
ExpiresActive On
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
</ifModule>
<ifModule mod_headers.c>
<filesMatch "\\.(ico|png)$">
Header set Cache-Control "max-age=2592000, public"
Header unset Last-Modified
</filesMatch>
</ifModule>
Tools zur Erstellung von Favicons / Touch-Icons
Die Erstellung von Favicons geht relativ einfach mit dem X-Icon Editor. Hier können Sie Bilder in verschiedenen Formaten hochladen. Eine Vorschaufunktion ist verfügbar. Das Ergebnis können Sie in verschiedenen Größen herunterladen.
Touch-Icons können Sie einfach mit dem Apple Touch Icon Generator erstellen. Das Tool generiert die Icons in verschiedenen Größen.