Abbildung...
Das Apple Touch Icon ist für Suchmaschinen wie Google, Bing und Co. wichtig, damit diese den Webinhalt einer Webseite als mobiltauglich klassifizieren können.
Dieser Beitrag zeigt Ihnen die Erstellung eines solchen Icons für Ihre eigene Webseite.
Suchmaschinen bewerten mobiltaugliche Webseiten seit einiger Zeit höher im Ranking als opulente Desktop-Webseiten im klassischen Style, denn nach aktuellen Zahlen besuchen zu 80-90% der Nutzer Webseiten heutzutage mit dem Smartphone oder dem Tablet.
Wazu das alles?
Abbildung...
Das Apple Touch Icon ist zunächst für Mobilgeräte vollkommen unsichtbar, es wird erst dann angezeigt, wenn Sie ein Lesezeichen einer Webadresse auf dem Desktop des Smartphones anlegen. Statt des Standard-Fähnchens für die Lesezeichen, wird Ihr Icon angezeigt, sofern eines existiert.
Das Icon bringt für Sie als Webseiten-Betreiber aber auch ein paar Vorteile.
Durch das Icon verbessern Sie das Ranking in Suchmaschinen da Sie anzeigen, das Ihr Webseiten-Layout responsiv auf mobile Endgeräte reagieren kann.
Zusätzlich erhält der Endanwender einen besseren Bezug zu Ihrer Webseite über ein sinnreiches Bild, damit steigern Sie den ergonomischen Nutzen.
Hinweis | Zwar stammt diese Idee von Apple, sie ist jedoch fast uneingeschränkt für ANDROID und Windows-Betriebssysteme funktionsfähig.
Vier feste Bildauflösungen
Entgegen vieler Angaben im Internet, gibt es konkrete Vorgaben bezüglich der Namensvergabe und der Bildauflösung dieses Icons. Da die Icons auf verschiedenen Apple-Geräten mit unterschiedlichen Bildschirmgößen angezeigt werden müssen, sollten auch verschiedene Icon-Größen passend dazu vorliegen. Aktuell gibt es für die älteren Apple-Geräte die folgenden Vorgaben:
- 57x57px
- 72x72px
- 114x114px
- 144x144px
Aufgrund der neueren Displays, wie zum Beispiel dem Retina-Display, haben sich auch die Bildauflösungen etwas verändert, es dürfen daher durchaus mehr Pixel werden.
- 76x76px
- 120x120px
- 152x152px
- 180x180px
Das Touch-Icon muss daher in vier verschiedenen Auflösungen vorliegen.
Feste Namensvorschrift
Die Namensvergabe der Icons hat einfluß auf die optische Darstellung des Icons auf dem Smartphone. Inwieweit dies auch für Android-Geräte gilt ist mir derzeit nicht bekannt.
Hinweis | Nutzer von ANDROID- oder Windows-Geräten kommen natürlich ebenfalls in den Genuss solcher Icons wenn Sie ein Lesezeichen auf dem Homescreen des Smartphone anlegen.
apple-touch-icon...png
Dieser Dateiname bewirkt, dass Ihr Icon mit abgerundeten Ecken, einem Schlagschatten und einem Glaslook versehen wird.
Hinweis | Der Icon-Look ist grundsätzlich vom verwendeten Betriebssystem und dem genutzten Theme des Desktops abhängig. ANDROID und Windows unterstützen daher diese Namenskonvention nicht und zeigen das Icon so an wie Sie es entworfen haben.
apple-touch-icon...-precomposed.png
Die Dateierweiterung precomposed hat zur Folge, das Ihr Icon unverändert auf dem Apple-Smartphone oder Tablet dargestellt wird. Für die optischen Effekte wie Schatten, Glaslook und abgerundete Ecken müssen Sie also selber sorgen.
Grundsätzlich werden natürlich auch Icons in anderen Bildauflösungen angezeigt aber die oben gezeigte Namensvorschrift ist optimal.
Hochladen des Icons
Wenn Sie selbst Webseitenbetreiber sind, müssen Sie das Icon noch auf Ihre Webseite hochladen und verfügbar machen.
Ich empfehle Ihnen die Icons immer in die root der Webseite zu legen, also in das Verzeichnis in dem auch die Datei INDEX.HTML liegt.
In den HTML-Code einbinden
Tragen Sie den folgenden Beispiel-Code in den head-Bereich der INDEX.HTML ein, speichern diese ab und übertragen diese via FTP auf Ihre Domain.
<head>
...
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
...
</head>Sofern Sie Wordpress-User sind und die Icons im Theme-Ordner abgespeichert haben, hilft Ihnen die Wordpress-Funktion get_template_directory_uri() damit Sie nicht den kompletten Pfad eintippen müssen.
<head>
...
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-144x144.png" />
...
</head>Das war's auch schon.
Jetzt ist es an Ihnen ein eigenes Icon für Ihre Webseite zu entwerfen und auf die vielen mobilen Endgeräte zu bringen.
Nachtrag | Wie so viele Ideen aus dem Hause Apple, hat sich auch diese nicht durchsetzen können. Das Apple Touch Icon ist tot und wird selbst vom eigenen Betriebssystem nur noch halbherzig unterstützt (Stand 2019).