Apple Touch Icon erstellen

Apple Touch Icon: Ray-getty.de
 Beispiel Apple Touch Icon

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?

Apple Touch Icon auf ANDROID
 Lesezeichen mit Apple Touch Icon auf ANDROID

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.

Hits: 1

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.