Webclip-Icons für die eigene Website
Seit gestern ist für das iPhone die neue Firmware in der Version 1.1.3 verfügbar. Aus meiner Sicht sind jetzt zwar nicht die ganz großen Änderungen dabei, aber allein für die neuen Möglichkeiten mit dem Home-Screen hat sich das Update gelohnt. Man hat nun also die Möglichkeit, die Reihenfolge der Icons auf dem Home-Screen zu verändern und neue Icons in Form von Links auf Webseiten, so genannte Webclips, hinzu zu fügen. Im Normalfall wird dann als Icon eine Miniaturansicht des Ausschnitt der Webseite angezeigt, der bei Erstellung des Webclips auf dem Bildschirm zu sehen war. Dies ist zunächst ja erstmal einigermaßen unspektakulär. Jedoch hat jeder Webmaster die Möglichkeit, dies zu ändern und stattdessen dort ein cooles Icon darstellen zu lassen.
Und das ist sogar einigermaßen einfach. Manch einer kennt das vielleicht von einigen Webseiten, die in der Adresszeile des Browsers links neben der Adresse ein kleines Icon, ein sogenanntes Favicon, darstellen. Ähnlich verhält es sich nun auch mit dem Icon für die Webclips. Damit nicht eine Miniaturansicht der Webseite, sondern ein mehr oder weniger cooles Icon angezeigt wird, muss der Webmaster nun in das root-Verzeichnis seiner Webseite eine 57x57 60x60 Pixel große Datei mit dem Namen "apple-touch-icon.png" legen, die das gewünschte Icon darstellt. Wer mag, kann einmal meinen Blog als Webclip auf seinem iPhone hinzufügen und Boom! habt ihr mein außerordentlich sympathisches Lächeln auf eurem Home-Screen. ;-)
Eine weitere Möglichkeit besteht darin, dass man in den Head-Bereich seiner Webseite den folgenden HTML-Tag eingibt und damit auf eine entsprechend abgelegte Datei verweist:
<head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="whatever.jpg"/>
</head>
Handelt es sich bei der auf diese Weise referenzierten Datei um eine größere als 57x57 Pixel und auch nicht um eine .png-Datei, so sollte dies kein Problem darstellen. Die Grafik wird dann auf die entsprechende Größe skaliert.
Im Anschluss ein Screenshot meines Home-Screens. In der untersten Reihe kann man rechts neben dem iTunes-Icon drei neu hinzugefügte Webclips sehen. Ganz rechts seht ihr das Webclip-Icon meines Blogs.
Weitere Informationen hierzu gibt es auch im Fontblog, im TUAW, direkt bei Apple und bei Dan Dickinson.
Kommentare
Ansicht der Kommentare: Linear | Verschachtelt
Florian Mohr am :
ein super Artikel. Nur leider klappt die ganze Sache bei mir anscheinend nicht...was wohl an mir liegt.
Ich verwende ebenfalls serendipity zum Betreiben meines Blogs.
Doch weder das Kopieren der .PNG Datei ins Root-Verzeichnis, noch das Einfügen des Links in die Template 'index.tpl' scheinen den gewünschten Erfolg zu bringen.
Vielleicht kann man mir weiterhelfen. Ich habe meine E-Mail einmal mit angegeben.
Nochmals: Wirklich ein schöner und vor allem nützlicher Artikel.
Gruß,
Florian
Flo am :
Florian Mohr am :
das root Verzeichnis der serendipity Installation wäre dann das Verzeichnis, in dem auch Verzeichnisse wie uploads, archives, plugins, usw. liegen oder?
Falls ja, so habe ich die Datei dorthin kopiert, allerdings ohne Erfolg. Ich habe in meiner Verzeichnisstruktur keinen Unterordner für serendipity angelegt, sondern alle Dateien und Verzeichnisse direkt auf den Server kopiert.
Dorthin habe ich dann auch die Datei abgelegt.
Habe sie apple-touch-icon genannt und die unter Paint entworfene Datei als .PNG gespeichert.
Gruß,
Florian
Flo am :
Florian Mohr am :
www.flowshots.de
Ich bin mir auch nicht sicher, was ich falsch mache...ich habe es auch bereits mit der anderen Methode, welche sie auf Ihrer Seite beschreiben probiert, also die Sache mit der Weiterleitung.
Ich habe ein Verzeichnis erstellt, dort eine index.html - Datei angelegt und das Bild in den gleichen Ordner kopiert. Die index.html läßt sich aufrufen, die leere Seite erscheint, wenn ich diese dann zum HomeScreen adden will, wird die Grafik für den WebClip jedoch ebenfalls nicht geladen.
Gruß,
Florian
Flo am :
Florian Mohr am :
so, per ftp-Programm habe ich mir die Datei genauer angesehen. Sie hatte zwar die Endung .PNG, aber in Großbuchstaben. Die Datei wurde so von Paint erstellt. Nachdem ich .PNG in .png geändert habe, also einfach alles klein geschrieben habe, funktioniert es :) endlich.
Nochmals vielen Dank.
Gruß,
Florian
Flo am :