WebClip Icon für das iPhone erstellen
Kleine Icons zur bildhaften Kennzeichnung von Internetseiten haben sich in den letzten Jahren großer Beliebtheit erfreut. Das Favicon als Markierung von Lesezeichen oder der Browser-URL kennt wohl mittlerweile jeder. Doch was genau ist ein WebClip Icon? Die Lösung ist ganz einfach. Das Favicon im iPhone und iPod Touch!
Damit das iPhone anstelle eines automatisch generierten Icons ein schönes, vom Webseitenbetreiber erstelltes, Icon anzeigt muss nicht viel getan werden. Im Folgenden erkläre ich in aller Kürze was getan werden muss.
Wo erscheint das Icon denn überhaupt?
Das WebClip Icon wird erst dann sichtbar, wenn ein iPhone oder iPod Touch Benutzer sich dazu entscheidet eine Website nicht in den Favoriten von Safari zu verwalten sondern ihr einen ehrenvollen Platz auf dem Home Bildschirm zuzuweisen.
Sofern kein WebClip Icon vorhanden ist, erstellt das iPhone automatisch ein passendes. Dieses zeigt jedoch nur eine stark verkleinerte Ansicht der gesamten Website. Ich für meinen Teil wollte solch ein hässliches Icon nicht auf dem Home Bildschirm platzieren, also muss ein WebClip Icon her.
WebClip Icon erstellen
Erstellt eine neue Datei mit den Abmessungen 60×60 Pixel und gestaltet Euer Icon. Beachtet hierbei bitte, dass die gesamte Arbeitsfläche zum Icon generiert wird.
Der große Vorteil liegt darin, dass Ihr weder die abgerundeten Ecken einbringen, noch die Spiegelungen hinzufügen müsst. Dies geschieht alles im iPhone selbst.
Die fertige Grafik speichert Ihr nun unter dem Dateinamen “apple-touch-icon.png” in den Root Eurer Seite ab. (Hinweis: Bei WordPress muss das Icon in der selben Hierarchieebene liegen in der sich auch die wp-config.php-Datei befindet.)
Das wars. Ihr benötigt im Gegensatz zum Favicon keine Codeschnipsel im Seitenhead oder ähnliches. einfach nur das Icon erstellen, hochladen fertig.
Themenverwandte Artikel:
Folgende Beiträge könnten dich ebenfalls interessieren.
Welcome to Kulturbanause, the private blog & portfolio of
16. August 2008, 10:59 Uhr
Iphone??? Ich les immer nur Iphone????? :-))
Noch knapp 3 Wochen, dann kann ich mir Dein Icon “richtig” anschauen :-)
26. August 2008, 11:42 Uhr
Danke! Sehr hilfreich
24. September 2008, 01:18 Uhr
[...] Internetseiten lassen sich auf dem iPhone per Favoriten-Funktion direkt auf den Home-Screen befördern. Um dort auch ein hübsches Icon zu präsentieren sollte der Webdesigner ein sog. WebClip-Icon hinterlegen. Wie das geht erkläre ich in einem früheren Artikel. [...]
24. Januar 2010, 18:32 Uhr
Ich habe mehrere Websites, für die ich gerne jeweils eigene Icons verwenden würde. Gibt es auch eine Lösung dafür? Vorab vielen Dank!
25. Januar 2010, 08:06 Uhr
@Matt: Ich verstehe das Problem nicht ganz. Du kannst doch auch für mehrere Websites ein solches Icon erstellen und jeweils im Root ablegen.
1. Februar 2010, 13:15 Uhr
@Jonas, vielen Dank für Deine Rückmeldung. Ich habe es noch einmal bei meinem Hoster ausprobiert, bei dem ich in diversen Unterordnern iPhone Websites liegen habe und die über eigene Domains angesprochen werden können.
Bei diesen Websites habe ich im Header die Zeile einfügt.
Die Grafik wird aber nur dann als Icon herangezogen, wenn es im Ordern “html” liegt … sonst funktioniert es nicht! Die Websites selbst liegen aber etwa 4-5 Unterordner weiter.
Hast Du noch eine Idee?
1. Februar 2010, 14:08 Uhr
@Jonas, hat sich erledigt – über kann man es lösen – aber vielen Dank!
1. Februar 2010, 14:10 Uhr
hier bin ich fündig geworden -> http://www.apfelquak.de/2008/01/17/homescreen-icon-fuer-web-snippets-erstellen,/