In den Urzeiten des Internets war das Thema Favicon noch recht übersichtlich: Eine ico-Datei mit der Größe von 16×16 Pixeln ins Root-Verzeichnis der Website abgelegt und fertig. Dieses Icon wurde dann in den Browser-Tabs oder Lesezeichen angezeigt.

Mittlerweile ist das Thema etwas unübersichtlicher geworden, die Browser- oder Gerätehersteller zeigen an verschiedensten Stellen Icons von der Website an und erwarten dabei unterschiedliche Größen. Hier ein Überblick, ohne Anspruch auf Vollständigkeit:

  • Das Favicon mit 16x16px wird weiterhin in Desktop-Browsern für Lesezeichen und das aktuelle Tab genutzt
  • Google zeigt aktuell in den mobilen Suchergebnissen ein Website-Icon an
  • Fügt man auf dem Smartphone eine Website zum Home-Screen hinzu (Stichwort: Webapps) wird entweder ein Icon oder – sofern keines vorhanden eine verkleinerte Version der Website angezeigt
  • Die meisten aktuellen Browser zeigen etwa die Bookmarks oder auch zuletztbesuchte Seiten oder die „wichtigsten Seiten“ als Icons an
  • Unter Windows 10 kann man Websites als Kacheln anlegen

Größen-Vielfalt bei Touch-Icons

Schön wäre, wenn wir einfach ein skalierbares Icon (etwa im svg-Format) nutzen könnten, doch leider können die meisten Browser oder Geräte damit nichts anfangen. Stellt man nur ein Icon bereit, wird es je nach Endgerät skaliert, wobei es zu Verzerrungen oder Unschärfen kommen kann. Möchte man also ganz sicher sein, dass sein Website-Icon oder Logo bei möglichst vielen Nutzern sauber abgebildet wird, dann sollte man das Icon in mehreren Größen anbieten. Im Folgenden ein Überblick über aktuelle Icon-Größen im Jahre 2019.

Favicon

Das Favicon hat wie bereits erwähnt eine Größe von 16×16 Pixeln.

Die Einbindung sieht wie folgt aus.

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

Möchte man auch ältere Browser unterstützen, sollte man das Icon im ico-Format nutzen. Da die meisten Bildbearbeitungsprogramm kein ico-Format speichern können, nutzt man am einfachsten einen Online-Converter wie etwa convertico.com, um eine PNG-Datei ins ICO-Format zu konvertieren. Viele Browser unterstützen mittlerweile aber auch PNG-Dateien als Favicon (Infos hier)

Um auch hochauflösenden Displays gerecht zu werden, kann man das Icon zusätzlich noch in doppelter Größe hinterlegen.

<link rel="icon" type="image/png" sizes="32x32" href="/icons/32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/16x16.png">

Touch-Icons Apple

Für Apple-Geräte ist als Standard-Icon eine Größe von 180×180 Pixeln empfehlenswert. Das Icon braucht übrigens keine abgerundeten Ecken oder Glanzeffekte, das macht das iOS von selbst.

iOS sucht automatisch im Root-Verzeichnis der Website nach einer Datei mit dem Namen apple-touch-icon.png. Möchte man das Icon dagegen in einem Unter-Ordner ablegen, sollte man es mit diesem Meta-Tag im Head einbinden:

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />

Um eventuelle Unschärfen beim Skalieren zu vermeiden, kann man die Icons in der passenden Größe für verschiedene Endgeräte anpassen.

Früher waren noch deutlich mehr Größen für die Apple Touch Icons üblich, angefangen bei 57x57px. Dann wurden von iOS 6 zu iOS 7 die Icon-Größen geändert wurde und es waren sowohl viele ältere iDevices ohne Retina-Display sowie neue mit Retina-Display im Umlauf. Da iOS 7 schon 2013 veröffentlicht wurde und ältere Versionen heute kaum noch eine Rolle spielen, zeigt diese Tabelle nur die aktuellen Geräte-Größen (Stand Anfang 2019)

Gerät Größe des Touch Icons
iPhone mit Retina-Display 180×180
iPad mit Retina-Display 167×167
iPad ohne Retina-Display 152×152

Ist das Apple Touch Icon für das jeweilige Gerät nicht in der passenden Größe verlinkt, nimmt iOS einfach die nächstpassende Datei und skaliert das Icon entsprechend.

Android Touch Icon

Auch Android-Geräte nutzen (aktuell noch) die als Apple Touch Icon eingebundenen Dateien, allerdings ist dies als deprecated eingestuft, für Android-Geräte sollte man daher ein eigenes Touch-Icon einbinden. Google empfielt dafür ein Dateigröße von 196×196 Pixeln.

<link rel="shortcut icon" href="android-icon.png" sizes="196x196">

Windows Touch Icons bzw. Windows Tile Icons

Windows bedient sich im Gegensatz zu Android nicht an den Apple Touch Icons, für das Microsoft-Betriebssystem muss man eigene sogenannte Tile Icons einbauen. Da man die Kacheln auf dem Windows Screen in verschiedenen Größen und Formaten einfügen kann, ist auch hier die Bereitstellung der Icons in mehreren Größen empfehlenswert:

<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />

Alle Favicons und Touchicons im Überblick

Möchte man für alle aktuellen Anforderungen ein passendes Icon anbieten, müsste die komplette Einbindung also ao aussehen:

<link rel="shortcut icon" href="/icons/196.png" sizes="196x196">
<link rel="shortcut icon" href="/icons/32.png" sizes="32x32">
<link rel="shortcut icon" href="/icons/16.png" sizes="16x16">

<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png"> // 180x180px
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-167.png" sizes="167x167"> // 167x167px
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-152.png" sizes="152x152"> // 152x152px

<meta name="msapplication-square70x70logo" content="/icons/70.png">
<meta name="msapplication-square150x150logo" content="/icons/150.png">
<meta name="msapplication-wide310x150logo" content="/icons/310x150.png">
<meta name="msapplication-square310x310logo" content="/icons/310.png">

Dieser Beitrag wurde ursprünglich am 8. März 2016 veröffentlicht