Ein Apple Touch Icon für die eigene Webseite erstellen

Written by on . Posted in Allgemeines, Mac OS X, Merkhilfen, Photoshop, Pick / Empfehlungen, Technik, Wordpress

Prima Anleitung zum Erstellen eines eigenen Touch Icon. Schön kurz und knapp, aber es funktioniert. 😉

Anmerkung noch an die Leute, die Themes von yoothemes.com verwenden:
Bei mir war es so, dass im aktuellen Theme es bereits eine Daten „apple_touch_icon.png“ im Hauptverzeichnis gab. Das war ein Bild mit einem WordPress-Logo. Ich musste nur dieses ersetzten und gut war.
War mir noch aufgefallen ist: In dem Code-Schnippsel, den man in die header.php des Themes einbaut, wird der Dateiname mit Bindestrichen geschrieben. Bei mit im Themes-Root, war die vorhandene Datei mit Unterstichen benannt.

Danke, Ellen für den tollen Artikel.

Ein Apple Touch Icon für die eigene Webseite erstellen:

Apple Touch Icon erstellen Mit Hilfe eines Apple Touch Icons kann man sich bestimmte Webseiten auf dem Home-Screen des iPhones oder iPads abspeichern. So kann man immer wieder schnell auf seine Lieblings-Webseiten zugreifen. Besonders schön ist es, wenn diese Webseiten ein extra vorbereitetes Apple Touch Icon anbieten, denn standardmäßig wird nur ein verkleinerter Screenshot der Webseite als Icon angezeigt. Mit einem integriertem Apple Touch Icon wird es möglich, das eigene Logo oder ein zum Webdesign passendes Symbol zu verwenden. Und so funktioniert’s:

Das Icon erstellen

Ein Apple Touch Icon kann man ähnlich wie ein Favicon ganz leicht erstellen. Es wird lediglich ein PNG-Bild im Format 128×128 Pixel benötigt. Den Glanz-Effekt und die abgerundeten Ecken muss man nicht selbst erzeugen. Diese Effekte werden von Apple automatisch hinzugefügt. Dann lädt man sich das Icon in den eigenen Webseiten-Ordner hoch und speichert sich den URL-Pfad des Bildes.

Den benötigten Code einbinden

Innerhalb des head-tags (z.B. unterhalb des Favicon Icons) fügt man jetzt folgenden Code ein:

<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon.png"/>

Verwendest du WordPress kannst du innerhalb des head-tags in der header.php Datei deinen Code auch in dieser Form einfügen (wenn das Apple Touch Icon Bild im Haupt-Ordner des aktiven Themes eingefügt hat):

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png"/>

Icon ohne abgerundete Ecken und Glanzeffekt

Möchtest du keinen Glanzeffekt oder abgerundete Ecken für das eigene Icon verwenden, muss man das vorbereitete Icon mit dem Zusatz »precomposed« abspeichern. Also z.B.:

<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon-precomposed.png"/>

Weitere Infos zum Apple Touch Icon findest du auch noch auf der Apple iOS Developer Webseite.

Hast du weitere Tipps oder Fragen zur Integration eines Apple Touch Icons? Über dein Feedback und weitere Tipps freue ich mich sehr!

(Via Elmastudio.)

Tags: ,

Leave a comment