Apple Touch Icon für Websites & Online-Shops

Viele Personen speichern beim surfen sogenannte Favoriten oder bauen Schnellzugriffe ein, um Links möglichst schnell abzurufen.

Bei Smartphones gibt es aber auch die Möglichkeit, einen gewünschten Link direkt ins Menu des Smartphones zu legen – Ein sogenanntes Apple Touch Icon.

 

Apple Touch Icon erstellen

Ein Touch Icon besteht normalerweise wie ein Favicon nur aus einem Symbol, welches Ihre Website oder Ihren Online-Shop symbolisiert.

Falls Sie bereits eines besitzen, können Sie daher auch eine grössere Version des Favicons nutzen.

Wichtig ist, dass Sie das Icon als PNG-Bilddatei anlegen, um den Hintergrund transparent zu halten.

Speichern Sie das Icon mit dem Namen „apple-touch-icon.png“ in der Grösse von 180 x 180 Pixel.

 

Apple Touch Icon einbauen

Öffnen Sie via FTP-Programm den Zugriff zu Ihrer Website.

Als erster Schritt laden Sie die erstellte Datei apple-touch-icon.png in den Bilderordner, meistens unter images oder img.

Anschliessend kopieren Sie den folgenden Code und bauen diesen innerhalb des <head></head> Tags ein:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">

Hinweis: Anstelle von img/ muss der Name des eigenen Bilderordners angepasst werden.

Ab sofort können iPhone-Nutzer einen Schnellzugriff anlegen, welcher jedoch aus Ihrem Symbol besteht, was ganz einfach schöner aussieht und den Personen besser in Erinnerung bleibt.

 

Touch Icon ohne Kanten und Glanz

Das iPhone macht automatisch Kanten sowie einen Glanz um das Icon.
Möchten Sie das Ihr Icon ohne diesen Effekt platziert wird?

Dann sind 2 Schritte notwendig:

1.) Speichern Sie das Icon mit dem Namen apple-touch-icon-precomposed.png
Sie fügen also ganz einfach das Wort -precomposed hinzu.

Dann nutzen Sie innerhalb des <head></head> Tags den folgenden Code anstelle des obenstehenden:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon-precomposed.png">


Hinweis:

Die Entfernung der Kanten sowie des Glanzeffekt sind für Safari + iOS 7 sowie ältere Versionen nicht kompatibel.


2 Antworten auf „Apple Touch Icon für Websites & Online-Shops“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.