Touch Icon für Tablets und Smartphones

Benutzer eines Smartphones oder Tablets haben die Möglichkeit, sich bspw. eine Website als Icon auf dem Gerät abzuspeichern. Dieses Icon nennt man deshalb auch „Touch Icon“. Man kann es ebenso wie ein normales App-Symbol bedienen. Nur öffnet sich hier keine App, sondern der Browser.

In diesem Artikel zeige ich dir, wie du Touch Icons entsprechend in deine Website einbinden kannst. Ich gehe dabei auf die Icons für iOS von Apple, Android von Google und Windows Mobile von Microsoft ein.

 

Touch Icon erstellen

Ein Touch Icon zu erstellen ist immerhin recht simpel. Alles, was du dazu brauchst, ist eine quadratische Grafik im PNG-Format. Diese Grafik lädst du anschließend auf den Webspace deiner Webseite hoch. Danach kannst du sie direkt verwenden. Einige Geräte fügen Effekte und abgerundete Ecken danach automatisch hinzu.

Die Größe des Touch-Icons hängt vom Gerät ab, auf dem der Nutzer die Webseite schlussendlich abspeichert. Daher kann die Größe durchaus unterschiedlich sein. Die Geräte skalieren das Touch Icon dann entsprechend und stellen es so größer oder kleiner dar. Das kann unter Umständen leichte Verzerrungen und Unschärfe-Effekte zur Folge haben. Die einzelnen Hersteller-Empfehlungen werde ich bei den entsprechenden Unterpunkten benennen.

Wurde die Website angepinnt, erscheint das Touch Icon als normales Symbol neben den anderen Apps, die der Nutzer installiert hat. Nachfolgend zeige ich dir, wie du Touch Icons in deine Webseite einbinden kannst.

 

Apple Touch Icon

Das größte Apple Touch Icon findet derzeit ab dem iPhone 6 Plus Verwendung. Es hat eine Größe von 180 x 180 Pixel. Nachstehende Tabelle zeigt dir alle Größen, die auf Apple-Geräten mit iOS 7 oder neuer vorkommen können.

 

Größen-Tabelle für das Apple Touch Icon

Apple-Gerät Größe des Touch-Icons in Pixel
iPad ohne Retina-Display 76 x 76
iPhone 4S
iPhone 5
iPhone 6
120 x 120
iPad mit Retina-Display 152 x 152
iPhone 6 Plus
iPhone 7
iPhone 7 Plus
180 x 180

 

 

Apple Touch Icon in Webseite einbinden

Die iOS-Geräte suchen übrigens automatisch nach der Datei apple-touch-icon.png im Hauptverzeichnis deiner Webseite. Die Einbindung eines separaten Codes ist daher nicht zwingend erforderlich, wenn du die Grafik im Root-Verzeichnis unter diesem Namen ablegst. Es empfiehlt sich jedoch – unabhängig davon wo genau du die Grafik abgespeichert hast – den Pfad im <head> ... </head>-Bereich der Webseite entsprechend zu definieren.

 

Beispiel:

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

 

Wenn du für die verschiedenen Apple-Geräte verschiedene Größen deines Touch Icons anbieten möchtest (um ggf. Verzerrungen zu vermeiden), kannst du alle Größen entsprechend hinterlegen. Das funktioniert wie folgt:

 

Beispiel:

<link rel="apple-touch-icon" sizes="76x76" href="/bilder/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/bilder/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/bilder/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/bilder/apple-touch-icon-180.png" />

 

Android Touch Icon

Ein Touch Icon für Android konnte man hingegen lange Zeit mit dem Code-Zusatz precomposed (<link rel="apple-touch-icon-precomposed" href="/bilder/apple-touch-icon.png" />) in die Website einbinden. Man konnte diesen Tag aber auch verwenden, um Glanzeffekte und abgerundete Ecken auf iOS-Geräten zu unterdrücken.

Inzwischen gilt dieser Tag aber als „deprecated“, also als veraltet.

Für Android-Geräte empfiehlt Google hingegen ein Touch Icon in der Größe von 192 x 192 Pixel. Das Touch Icon kannst du entsprechend wie folgt in den HTML-Code einbinden.

 

Beispiel:

<link rel="icon" sizes="192x192" href="/bilder/android-touch-icon.png">

 

Microsoft Touch Icon

Für Windows Mobile von Microsoft gibt es bei den Touch Icons jedoch eine Besonderheit. Windows Mobile benutzt keine App-Icons wie iOS oder Android, sondern setzt auf die sogenannten Tiles. Diese können, je nachdem was der Nutzer möchte, in unterschiedlichen Größen dargestellt werden. Microsoft selbst empfiehlt ferner die nachstehende Werte für Windows-Geräte.

 

Größen-Tabelle für Windows Mobile

Kachelgröße Standard-Abmessung der Kachel Mindestgröße Touch Icon Empfohlene Größe Touch Icon
Klein 70 x 70 56 x 56 128 x 128
Mittel 150 x 150 120 x 120 270 x 270
Breit 310 x 150 248 x 120 558 x 270
Groß 310 x 310 248 x 248 558 x 558

 

Die Touch Icons für Windows Mobile kannst du überdies auf zwei Arten einbinden.

Einbindung direkt im META-Bereich:

Ähnlich wie für iOS oder Android, kannst du das Touch Icon für Windows Mobile direkt im META-Bereich der Website einbinden.

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

 

Einbindung als XML Datei

Darüber hinaus hast du ebenso die Möglichkeit, die Touch Icons als XML Datei in die Website einzufügen. Der META-Tag dazu lautet wie folgt.

<meta name="msapplication-config" content="ieconfig.xml" />

 

Des Weiteren musst du noch eine ieconfig.xml im Root-Verzeichnis der Domain mit diesem Inhalt anlegen:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
 <msapplication>
 <tile>
 <square70x70logo src="bilder/smalltile.png"/>
 <square150x150logo src="bilder/mediumtile.png"/>
 <wide310x150logo src="bilder/widetile.png"/>
 <square310x310logo src="bilder/largetile.png"/>
 <TileColor>#009900</TileColor>
 </tile>
 </msapplication>
</browserconfig>

 

Alternativ kannst du die XML Datei aber auch als browserconfig.xml im Hauptverzeichnis abgelegen. Der Internet Explorer 11 sucht von alleine nach dieser Datei, wenn der Nutzer eine Webseite als Tile anheftet. Es ist jedoch empfehlenswert, dass du die Angaben im Kopfbereich der Website tätigst. So ist sichergestellt, dass der Browser den Eintrag auch sicher findet.

 

Fazit

Touch Icons lassen sich in vielen Größen auf deiner Website einbinden. Es empfiehlt sich aber, jeweils die empfohlenen Werte der Mobile OS Hersteller für die Touch Icons zu nutzen. Im Zweifel ist es bspw. besser, ein hochauflösendes Bild auf eine geringere Auflösung zu skalieren als umgekehrt.

 


Dir gefällt dieser Artikel?

3 Gedanken zu „Touch Icon für Tablets und Smartphones

  • 26. Mai 2017 um 22:49
    Permalink

    Hallo, zunächst erst einmal danke für die dann doch hilfreiche Seite. Ich habe mal den Generator von web-stuebchen probiert. Funktioniert soweit auch ganz gut, bis auf die Kleinigkeit, dass mit dem Generator für Android eben keine Icon nebst Einbindelink generiert werden kann. Von daher habe ich den auf dieser Seite angebotenen Tipp für Android Geräte gleich in meiner Seite umgesetz und es funktioniert wunderbar. Besten Dank dafür!

    Antwort
  • 8. März 2017 um 11:10
    Permalink

    Hallo Jan,
    kann ich das Apple Touch Icon auf der Internetseite aufpoppen lassen?
    Also ich rufe meine Internetseite im Smartphone auf und es erscheint gleich oben mein icon zum abspeichern, gleich wie bei einer App.

    Antwort
    • Jan Pionzewski
      8. März 2017 um 18:08
      Permalink

      Hallo,

      so etwas ist mir leider nicht bekannt. Das Touch Icon ist ja quasi wie das Favicon nur ein Icon, was auf dem Smartphone des Nutzers angezeigt wird.

      Mir ist derzeit auch keine Funktion bekannt, mit der man per „antippen“ eines Symbols eine Website auf dem Smartphone-Homescreen anpinnen kann.

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.