1. Home
  2. SEO Wiki
  3. Mobile Touch Icon

Mobile Touch Icon

Das Mobile Touch Icon ist ein Symbol, welches ausschließlich auf mobilen Endgeräten entweder auf dem Home-Screen oder als Lesezeichen im Browser angezeigt wird. Sobald man eine Webseite zu seinem Startbildschirm als Verlinkung hinzufügt, erscheint das Mobile Touch Icon als Symbol der Verlinkung. Nachfolgend ein Beispiel unter Android:

Touch Icon Home-Screen (Android)

Apple Touch Icons

Bei der Einbindung greift Apple nicht auf die Standard Implementierung <link rel=“icon“> zurück. Sie haben eine eigene Link Relation „apple-touch-icon“ entwickelt, die in der einfachsten Form wie folgt eingebunden wird:

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

Sofern kein Unterverzeichnis im Meta-Tag angegeben wird, sucht iOS im Rootverzeichnis nach dem Dateinamen apple-touch-icon.png. Dieses sollte in einer Größe von 180x180 Pixeln abgelegt werden, da dies aktuell das Größtmögliche Touch Icon unter Apple ist. (iPhone mit Retina-Display) Für den Fall, dass ein kleineres Touch Icon benötigt wird, skaliert iOS einfach die nächstpassende Datei entsprechend.

Zusätzlich gibt es bei Apple bis iOS 7 die Besonderheit, dass iOS das Touch Icon automatisch mit abgerundeten Ecken und Glanzeffekten darstellt. Wer dies nicht möchte, kann dies mithilfe eines Schlüsselworts ab iOS 2.0 verhindern:

<html>
  <head>
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
  </head>
</html>

Sofern die Implementierung bis iOS 7 relevant ist, ist es grundsätzlich empfehlenswert, precomposed Symbole zu verwenden. Hiermit bleibt die volle Kontrolle in den eigenen Händen.

Ist die Implementierung allerdings erst ab iOS 7 relevant, muss das Schlüsselwort "precomposed" nicht mehr verwendet werden, da ab iOS 7 keine Spezialeffekte mehr auf Touch Icons angewendet werden.


Android Touch Icons

Lange Zeit konnte Android ebenfalls mit den Apple Touch Icons umgehen, was inzwischen allerdings als „deprecated“ eingestuft wurde. Für Android sollte daher heutzutage ein eigenes Touch Icon implementiert werden. Laut Google sollte dies eine Größe von 196x196 Pixeln aufweisen und kann wie folgt eingebunden werden:

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

Windows Tile Icons

Das Microsoft Betriebssystem kann weder mit den Apple, noch mit den Android Touch Icons umgehen. Windows sieht nicht nur eine völlig andere Implementierung vor, sondern gibt den Icons auch gleich einen ganz anderen Namen. Was Android und Apple als „Touch Icons“ bezeichnen, wird bei Windows „Tile Icons“ genannt.

Mit einer einzigen Größe lässt sich bei Windows leider nicht alles abdecken, daher empfehle ich grundsätzlich folgende Größen einzubinden: 70×70 Pixel, 150×150 Pixel, 310×150 Pixel und 310×310 Pixel.

<html>
  <head>
	<meta name="msapplication-square70x70logo" content="windows-small-tile.png" />
	<meta name="msapplication-square150x150logo" content="windows-medium-tile.png" />
	<meta name="msapplication-wide310x150logo" content="windows-wide-tile.png" />
	<meta name="msapplication-square310x310logo" content="windows-large-tile.png" />
  </head>
</html>

zurück zur Übersichtsseite

SEO Tools