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.
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Das tönt alles super. Vielen Dank!
Aber wie kann ich das Icon im Blogger / Blogspot einfügen?
Kann man denn auch selbst den Titel für das Icon festlegen?
@Yannic: Meinst du die Beschriftung die unter dem Icon auf dem iPhone erscheint? Dafür nimmt iOS den Seitentitel. Der Benutzer kann die Beschriftung aber anpassen wenn die Seite auf den Home-Screen gespeichert wird.
Da mein Seitentitel aber zu groß ist möchte ich einen Seitentitel einbinden der nur benutzt werden soll beim Webclip anlegen. Geht das ?
Hallo Denis. Ich fürchte das geht nicht, zumindest ist mir die Funktion nicht bekannt. Der User kann den Titel ja selbst umbenennen wenn er die Seite auf den Home-Screen speichert.
[…] iOS (also auf dem iPhone, iPod oder iPad) eine Website auf dem Home-Screen abspeichert. In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon […]
[…] das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt […]
hier bin ich fündig geworden -> http://www.apfelquak.de/2008/01/17/homescreen-icon-fuer-web-snippets-erstellen,/
@Jonas, hat sich erledigt – über kann man es lösen – aber vielen Dank!
@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?
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!
@Matt: Ich verstehe das Problem nicht ganz. Du kannst doch auch für mehrere Websites ein solches Icon erstellen und jeweils im Root ablegen.
[…] 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. […]
Danke! Sehr hilfreich
Iphone??? Ich les immer nur Iphone????? :-))
Noch knapp 3 Wochen, dann kann ich mir Dein Icon „richtig“ anschauen :-)