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ätGrößeNameName ohne Effekte
iPhone, iPod Touch, Android57px x 57pxapple-touch-icon.pngapple-touch-icon-precomposed.png
iPad72px x 72pxapple-touch-icon-72×72.pngapple-touch-icon-72×72-precomposed.png
iPhone mit Retina-Display114px x 114pxapple-touch-icon-114×114.pngapple-touch-icon-114×114-precomposed.png
iPad mit Retina-Display144px x 144pxapple-touch-icon-144×144.pngapple-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 6 comments
  • Sebastian

    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

    Sehr hilfreiche Info – danke!

  • Thorsten

    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?

  • trenvay

    Ein sehr informativer Beitrag! Hier kann man viel lernen. Danke für die Mühe, die Sie gemacht haben, um das alles zusammenzutragen und aufzuschreiben. Viele Grüße und mach weiter so.

    Lg Tren

  • Kaiser

    Hallo,
    ich bin gerade dabei, mich mit dem Thema auseinanderzusetzen.
    Meinen Sie, dass es möglich ist, den beschriebenen Schritt, eine Homepage zum Homescreen zuzufügen, auch als App zu erstellen?
    Ich würde gerne eine App erstellen, welche direkt auf eine Homepage weiterleitet.
    Hat hier jemand Erfahrungen?

    Vielen Dank für Eure Hilfe.

    • Kira Tschierschke

      Hallo Kaiser,

      wirklichen Mehrwert gibt eine App genau dann, wenn sie Features und Inhalte bietet, die speziell für den mobilen Use Case entwickelt wurden. Eine Webseite als App darzustellen, ist unserer Meinung nach meist nicht zielführend.

      Aber natürlich gibt es unterschiedlichen Gründe, warum genau das trotzdem der richtige Weg für Dich sein könnte.

      Daher folgende Links für dich:
      1. https://www.goodbarber.com
      – Vergleichsweise schicke Lösung für diesen Anwendungsfall, aber auch etwas teurer.
      – Nur auf englisch verfügbar
      – 30 Tage kostenlos testen
      – In den App Stores unter eigenem Namen (zusätzliche Kosten für Apple App Store 99 EUR pro Jahr, Google Play Store 25 EUR einmalig)

      2. https://appyourself.net/de/
      – Auf deutsch verfügbar
      – mittelpreisig
      – 20 Tage kostenlos testen
      – In den App Stores unter eigenem Namen (zusätzliche Kosten für Apple App Store 99 EUR pro Jahr, Google Play Store 25 EUR einmalig)

      3. https://www.appconfector.de
      – Auch auf deutsch verfügbar
      – Mit 7 EUR pro Monat einer der günstigsten Anbieter
      – 30 Tage kostenlos testen
      – In den App Stores unter dem Namen des Herstellers. Das ist nicht so schön, vor allem, da der Unternehmensaccount „AppConfector UG (haftungsbeschraenkt)“ heißt.

      Ich hoffe, wir konnten Dir weiterhelfen.

      Viele Grüße
      Kira

      PS: Wir haben die Links nur für Dich rausgesucht und übernehmen keine Garantie für die Korrektheit der Angaben des Anbieters. Mit keinem der Anbieter haben wir bisher zusammengearbeitet, da das wie gesagt nicht unserer Herangehensweise entspricht und wir Apps selbst entwickeln.

Hinterlasse einen Kommentar

Geben Sie Ihr Suchbegriff ein und drücken Sie Enter