Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML und CSS Tipps
18.02.2014

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:

// iPad Retina displays ab iOS7
<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="shortcut icon" href="/favicon.ico" />
<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.

<ifModule mod_expires.c>
  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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

75

Kommentare:

18.Juli2014

Hi, das ich ein super Beitrag. Das ist auch für einen Laien wie mich sehr verständlich geschrieben.

08.Januar2015

Vielen Dank für die Erklärung. Man findet im Netz mittlerweile ziemlich viel und dabei leider auch viel Verwirrendes.
Dein Artikel beschreibt das Wesentliche und das verständlich und nachvollziehbar.
Ich werde das Icon dann am Wochenende bei mir einbinden.

Gruß
Klaus

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.