In 4 Schritten ein „Apple Touch Icon“ für Webseiten erstellen

[spacer height=“10px“]

Sie möchten mehr iPad- und iPhone-Nutzer an Ihre Webseite binden? Wir führen Sie in vier einfachen Schritten zum eigenen Touch Icon für iPhones und iPads. So können Ihre häufig wiederkehrenden Besucher Ihre Seite bequem speichern und werden bei jedem Wischen über den Bildschirm an die Marke erinnert.

[spacer height=“10px“]

Auf iPhones und iPads können Webseiten nicht nur als Lesezeichen gespeichert werden, sondern auch direkt auf dem Home-Bildschirm platziert werden. Der Nutzer erreicht diese Funktion einfach über die „Öffnen mit…“-Schaltfläche und über den Punkt „Zum Home-Bildschirm hinzufügen“.

Ist ein entsprechendes Icon hinterlegt, wird ein neues Symbol auf dem Home-Screen erzeugt. Von dort aus kann es mit einem Klick aufgerufen werden. Wurde kein entsprechendes Icon hinterlegt, versucht das Betriebssystem ein Icon aus einem Screenshot der Webseite zu erstellen, dies sieht meisten unschön aus und erzielt keine Branding-Effekte auf den mobilen Endgeräten.

Auch Mitarbeitern hilft es, wenn Sie die wichtigsten Unternehmensseiten mit einem „Touch“ öffnen können. Zeigen Sie ihnen wie es geht.

Ein solches Icon kann ganz einfach zur Webseite hinzugefügt werden. Ursprünglich reichte es aus, einfach ein Icon mit dem Name apple-touch-icon.png oder apple-touch-icon-precomposed.png im Hauptverzeichnis der Webseite abzulegen. Die Icons mussten im PNG-Format hinterlegt sein und eine Größe von auf 57×57 Pixel haben.
Konnte das iPhone dann ein Icon über www.beispiel.de/appl-touch-icon.png abrufen, wurde dieses Icon für den Home-Bildschirm verwendet. Mit den neuen iPhones und iPads mit und ohne Retina-Display ist dieser Prozess ein kleines bisschen komplizierter geworden. Wir erklären hier wie Sie in vier einfachen Schritten ein Icon für Ihre Unternehmenswebseite anlegen.

In 4 Schritten zum eignen Apple Touch Icon

1. Die richtigen iPhone und iPad Icon Grafiken vorbereiten

Um alle aktuellen iPhone- und iPad-Geräte zu unterstützen müssen die Grafiken im PNG-Format und in 4 verschiedenen Größen vorliegen. Folgende Größen werden benötigt: 57x57px, 72x72px, 114x114px und 144x144px. Die entsprechnde Auflösung können Sie der untenstehenden Tabelle entnehmen.

2. Touch-Icon Namen vergeben

Benennen Sie die Grafiken entsprechend der folgenden Tabelle. Beim Speichern auf dem Home-Bildschirm wird das iPhone oder iPad automatisch zwei Effekte auf die Grafik anwenden – einen Schatten über das Icon legen und die Ecken abrunden. Falls Sie das verhindern möchten, muss der letzte Teil des Icon Names „-precomposed.png“ lauten.

[table color=“#444″]
Gerät Größe Name Name ohne Effekte
iPhone, iPod Touch, Android 57px x 57px apple-touch-icon.png apple-touch-icon-precomposed.png
iPad 72px x 72px apple-touch-icon-72×72.png apple-touch-icon-72×72-precomposed.png
iPhone mit Retina-Display 114px x 114px apple-touch-icon-114×114.png apple-touch-icon-114×114-precomposed.png
iPad mit Retina-Display 144px x 144px apple-touch-icon-144×144.png apple-touch-icon-144×144-precomposed.png
[/table]

3. Touch Icons mit FTP-Programm hochladen

Laden Sie die Touch Icons mittels eines FTP-Programms in das Hauptverzeichnis Ihrer Webseite hoch. Wenn Sie ein anderes verzeichnis als das Hauptverzeichnis wählen, denke Sie bitte daran die Pfade im untenstehenden Code entsprechend anzupassen.

4. HTML-Code hinzufügen

Fügen Sie den folgenden Code in den-Bereich Ihrer Webseite ein. Falls Sie die „Precomposed“-Icons verwerten möchten, passen Sie die Dateinamen entsprechend an. Gleiches gilt für den Pfad zu den Dateien, falls diese in einem anderen als dem Hauptverzeichnis abgelegt werden.

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

Falls Sie WordPress benutzen und die Grafiken in das Verzeichnis Ihres Themes gelegt haben, können Sie die Pfade entsprechend anpassen:

<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 alles. Um die Funktion zu testen, aktualisieren Sie einfach Ihre Homepage auf dem iPhone oder iPad und fügen diese zum Home-Screen hinzu. Weitere Informationen zu diesem Thema finden Sie in in Apples Safari Web Content Guide.

[message type=“success“ show_close=“true“]Erfahren Sie jeden Tag mehr zu „Mobile und App Marketing“ – folgen Sie fluidmobile auf Facebook.[/message]
Showing 3 comments
  • Sebastian
    Antworten

    Hallo,
    Da du recht weit oben in Suchergebnissen zu dem Thema zu finden bist, sollte ich vermerken, dass dein Tipp nicht ganz korrekt ist. Um Android-Geräte anzusprechen, sollte man die precomposed icons nutzen. Mathias Bynens hat vor einer Weile einige Beobachtungen angestellt, die immernoch aktuell zu sein scheinen: http://mathiasbynens.be/notes/touch-icons

  • Dieter Hofer
    Antworten

    Sehr hilfreiche Info – danke!

  • Thorsten
    Antworten

    So ist das aber nur für Apple und nicht Android? Wie erreiche ich beide BS, ohne auf Glanz und runde Ecken bei Apple verzichten zu müssen, wenn ich precomposed nutze?

Hinterlasse einen Kommentar

Geben Sie Ihr Suchbegriff ein und drücken Sie Enter