Apple Touch Icon erstellen und einbinden


apple-touch-icon

Apple Touch Icon Erklärung:

Ein Apple Touch Icon ist nichts anderes als ein Icon für die Handys. Das bedeutet, wenn ein Leser oder User von eurer Website diese direkt auf den Startbildschirm von seinem Handy speichert, erscheint ein schönes Icon das ihr selbst erstellt habt. Solltet Ihr kein Apple Touch Icon haben, wird einfach nur ein Snippet von eurer Website, also ein kleiner Screenshot von der Startseite gemacht. Die Idee ist von Apple, daher auch die Bezeichnung Apple Touch Icon. Jedoch können diese Apple Touch Icon auch von den Android Geräten gelesen und verwendet werden. Dazu muss der Code im Quelltext einfach abgeändert werden. Ein Apple Touch Icon kann verschiedene Formen haben, aber grundsätzlich ist das Apple Touch Icon immer von einem Quadrat mit abgerundeten Ecken um geben. Jedoch kann es auch ohne das erstellt werden, wie zum Beispiel beim Apple Touch Icon von Skype. Da ist eurer Fantasie keine Grenze gesetzt.

Apple Touch Icon richtig hinter legen:

Bevor Ihr einen der unten aufgeführten Codes einbindet in eure Website, ist folgendes zu tun:

  1. Apple Touch Icon im png oder ico Format erstellen. Wir empfehlen png.
  2. das Apple Touch Icon ins Root Verzeichnis hochladen. Das bedeutet da wo alle eure Daten und euer Content abgelegt ist oder auch euer Favicon (siehe Bild ).
  3. WICHTIG! Das Bild dass Ihr erstellt habt muss mit dem Dateinamen apple-touch-icon.png abgespeichert sein.
  4. jetzt zur Einbindung des Codes in den Quellcode…
Bild vom Root Verzeichnis

Bild vom Root Verzeichnis

Apple Touch Icon richtig einbinden (für Apple):

Wenn Ihr das Apple Touch Icon nur für Apple Geräte einbinden wollt, so muss der Code wie folgt aussehen:

<link rel=“apple-touch-icon“ href=“http://free-infos.com/apple-touch-icon.png“ />

Bedenkt bitte das mit dieser Version des Codes, dass Apple Touch Icon nur auf Apple Geräten dargestellt wird, nicht auf Android Geräten. Der Code sollte zu beginn des Headers eingebaut werden. Den Header beginnt mit <header> und endet wieder mit </header>, darin sollte der Code eingebaut werden, wenn möglich gleich zu Anfang des Headers. Mit dieser Code Version wird euer Apple Touch Icon einen Glanz Effekt haben der von Apple automatisch eingebaut wird.

Andorid Touch Icon richtig einbinden (für Android):

Wir empfehlen jedoch den nachfolgenden Code einzubinden, da dieser Code für Apple Geräte und auch für Android Geräte ist.

<link rel=“apple-touch-icon-precomposed href=“http://free-infos.com/apple-touch-icon.png“ />

Wie euch sicherlich aufgefallen ist, sieht der Code ein bisschen anders aus. Das Wort precomposed ist angefügt worden. Dies hat die Wirkung das bei den Apple Geräten der Glanz Effekt verschwindet und das Apple Touch Icon nun auch auf den Android Geräten funktioniert.

Apple Touch Icon Beispiele:

Nachfolgend möchten wir euch ein paar Beispiele des Apple Touch Icon zeigen. Wir zeigen euch solche mit und auch ohne Glanz Effekt, damit Ihr euch gleich von Anfang an ein Bild machen könnt was euch den besser gefällt.

 

 

Apple Touch Icon Beispiele

Apple Touch Icon Beispiele

Quellenverweise:

Icon auf der linken Seite: http://wegotop.com/wp-content/uploads/sites/45/2011/03/apple-touch-icon-magnetic16a2.png

Bild auf der rechten Seite: http://core0.staticworld.net/images/article/2013/11/kitkat_applauncher-100067516-orig.png

 

 

Wir hoffen euch mit dieser kurzen Anleitung geholfen zu haben, bei Fragen oder auch Anregungen sind stehts da.

 

Euer free-infos Team

Share and Enjoy

  • Facebook
  • Google Plus
  • RSS
  • Twitter
  • Tumblr
  • Pinterest
  • Print

Über Héctor Pablo Hernández

Seit 4 Jahren bin ich im Sektor Suchmaschinenoptimierung tätig. Geboren bin ich am 3.11.1987. Ich schreibe gerne Artikel für diese Branche da sie immer wieder aufregend ist und viel Abwechslung mit sich bringt. "Probleme gibt es nicht, nur Herausforderungen"

Kommentar erstellen

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg