Apple Touch Icon mit GIMP

Erstellen Sie eigene Pinsel und erweitern damit die verfügbare Pinselbibliothek um eigene, leistungsfähige Kreationen. Sie können in GIMP statische und animi...

Apple Touch Icon: Ray-getty.de

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?

Apple Touch Icon auf ANDROID

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).

Grafiktablett WACOM One - So zeichnen die Profis - Mit dem Grafiktablett von WACOM erstellen Sie Grafiken, Zeichnungen oder erstellen eigene Comics. Die Stifteingabe ist der Computermaus deutlich überlegen, da sie natürlich und organisch wirkt. Professionelles Zeichnen mit professionellem Werkzeug.

Über Amazon unterstützen

Ansehen?

© GIMP-Handbuch.de

about me

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.