Mit der neuen Firmware 1.1.3 für iPhone und iPod touch (wobei ältere Modelle dazu aber auch noch das Software-Upgrade Januar 2008 benötigen) lassen sich Bookmarks zu Webseiten auch auf dem Homescreen ablegen. Als Icon wird dabei standardmäßig ein Screenshot der aktuellen Seite genommen und entsprechend skaliert.
Im iPhone Dev Center erläutert Apple, wie man hier ein eigenes Icon vorsehen kann. Es gibt zwei Möglichkeiten. Entweder über einen Meta-Tag im Headbereich der Seite…
<link rel="apple-touch-icon" href="/customIcon.png"/>
…oder indem man eine Datei mit dem Namen apple-touch-icon.png in den Root-Folder der Webpräsenz legt.
Für beide Varianten gilt: Das Icon sollte genau 57×57 Pixel groß sein – andernfalls skaliert Safari sich das ganze passend zurecht. Den Glas-Effekt legt ebenfalls Safari drüber und schneidet bei der Gelegenheit etwas vom eigentlichen Bild ab, wodurch man für ein Logo die 57 Pixel nicht vollends ausreizen sollte. Hier haben sich, nach einigen Experimenten, 54 Pixel für das Logo bei einer Arbeitsfläche von 57 Pixeln als brauchbar erwiesen, während andernorts von gar nur 45 Pixeln als ‘sichere Größe’ gesprochen wird. Auch sollte das Bild keinen transparenten Hintergrund haben, der wird sonst nämlich schwarz.
[via Daring Fireball]
Update: Wie man eigene Icons für fremde Seiten erstellen kann, beschreiben die Artikel von Florian Schimanke, Drew McLellan und Jordan Dobson.
Update: Um das Favicon der Webseite zu benutzen, weil man kein eigenes Icon hat oder kein eigenes erstellen will: http://fav-clip.com/
{ 35 Kommentare… lese sie unten oder schreibe selbst einen }
Unnötig zu erwähnen, dass Apfelquak bereits ein solches Icon hat, oder?
Goil…..
Ja, weil ist ja oben links eingebunden
Ich habe vorhin 60px und 158px gelesen!?
Aber bestimmt nicht in diesem Zusammenhang.
Quelle: http://playgroundblues.com/posts/2008/jan/15/iphone-bookmark-iconage/
Ach so – ich dachte, du meinst 60 mal 158 px.
Naja, ob das nun 57 oder 60 px sind, dürfte doch nicht so viel ausmachen.
Liegt wahrscheinlich daran, das ich Brillenträger bin, aber ich kann keinen Unterschied in der Cripsness zwischen meinem (57×57), dem AQ-Icon (57×57) und dem Playgroundblues-Icon (60×60).
Generell lehrt die Erfahrung, dass man automatische Skalierungen, auf die man keinen Einfluss nehmen kann, bleiben lassen sollte.
Ich kann mir als armer Student die 18€ leider nicht leisten
Wäre vielleicht einer mit 1.1.3 kurz so nett und opfert 1 Minute für mich? Ich habe das CustomIcon eingebunden und würde gerne wissen, ob es auch geht.
Funktioniert, weyer. Ich würde den Affen aber noch etwas kleiner machen, so klebt er doch ziemlich an den Rändern.
@Matt
Hab’ ihn jetzt verkleinert. Ich hoffe dies genügt. Wäre dir für eine kurze überprüfung vielmals dankbar…
Perfekt.
Hey,
ich habe keine Ahnung, was ein Meta Tag oder ähnliches ist… Ich würde gerne auch ein eigenes Icon auf dem Homescreen haben, weiß aber überhaupt nicht, wie ich das schaffen könnte.
Kann mir da jemand helfen? Wäre sehr sehr nett.
Ich habe ein ganz normales iPhone von T-Mobile (simlock) und Version 1.1.3!
Gruß
Von was würdest du denn gerne ein Icon haben? Von deiner eigenen Seite oder einer anderen?
Ist egal, Hauptsache ich habe die Möglichkeit…:-)
Ne, egal ist das keineswegs. Bietet der Anbieter der Seite ein Icon, so hast du dieses auf dem Screen, wenn du es dort bookmarkst. Hat er keines, so bekommst du den Ausschnitt der Seite als Bookmark umgewandelt, auf dem du dich gerade befindest (so, wie es Steve in der Keynote gezeigt hat).
ok, das wusste ich nicht. Nehmen wir an ich möchte ebaY haben auf meiner Homescreen. Ich habe gerade ein Bookmark auf dem Homescreen erstellt, leider ist da nur ein Ausschnitt von der Hauptseite zu sehen. Wie kann ich jetzt das Icon von Ebay anzeigen lassen?
Wie mache ich jetzt weiter?
Zoom mit deinem iPhone/iPod auf den Bereich, wo das ebay-Logo ist und probier’s nochmal.
oh stimmt… das könnte funktionieren, danke. Gibt es da sonst keine andere Möglichkeit? Meta Tag oder so was, wie es oben beschrieben ist?
Die Seite startet dann aber immer in dem gezommten Bereich, was sehr unpraktisch ist.
genau…
Wenn du es schaffst, die Meta-Tags bei ebay zu ändern, bist du entweder ein Hacker oder der Webmaster von ebay. Ich denke keines von beiden ist der Fall.
hmm.. habe ich mir gedacht.
“oder indem man eine Datei mit dem Namen apple-touch-icon.png in den Root-Folder der Webpräsenz legt.”
Muss man hierfür auch ein Hacker sein?;-)
Ja, muss man.
@Hunne: Hab den Artikel mal ergänzt. Es gibt eine Möglichkeit, wie man auch fremde Sites mit einem eigenen Icon versehen kann.
was ist denn ein Webspace? Ich denke, dass ich echt zu wenig Ahnung habe, um dies zu schaffen. Gibt es denn keine genaue Anleitung für mega Anfänger?;-)
http://de.wikipedia.org/wiki/Webspace
und wie kann ich nun ein Webspace einrichten?
Also ich finde die vorgestellten Verfahren auch reichlich kompliziert. Zumal man immer die URL zu einem wie auch immer gearteten Icon wissen muss.
Deshalb habe ich mir überlegt, man könnte doch die vorhandenen Favicon als Apple-Icon nehmen. Daraus entstand in einer spontanen Feierabendbastelei http://fav-clip.com/
URL eingeben und auf der folgenden Seite wird aus dem Favicon der Seite ein Apple-Touch-Icon erzeugt. Diese Seite dann zum Home-Bildschirm hinzufügen. Es wird das jeweils beste verfügbare Favicon genommen, 16×16-Icons sehen daher leider etwas verpixelt aus. Aber IMHO immer noch besser als ein Seitenausschnitt.
Wenn der Bookmark aufgerufen wird läuft die Anfrage über http://fav-clip.com/, das nur zur Info, bevor wieder jemand ‘Datenschutz’ schreit! Ein Logging dieser Anfragen findet über das reine Server-Log hinaus nicht statt!
Known Issues:
- Weiterleitungen werden derzeit nicht berücksichtigt. Es ist der Bookmark der Zielseite anzugeben, damit es funktioniert.
- Das und ein nicht vorhandenes Icon resultiert in einem schwarzen Icon!
- Es wird versucht, die Hintergrundfarbe des Icons zu ermitteln und den Canvas passend zu setzen, was nicht immer zuverlässig klappt.
- Ich hab vorher noch keine Seite für iPhone/iPod touch gemacht. Das sieht also alles sehr alpha aus, was es auch ist.
Gewolltes Verhalten:
- Evtl. vorhandene Apple-Touch-Icons der Seite werden ignoriert.
hey danke, zm Teil klappt das wirklich sehr gut…
Ich hab ma ne frage:
ich hab irgendwo gelesen, dass man auch die symbole auf dem homescreen des iPod touch mit 1.1.3. verschieben kann und so.
Kann man das auch machen, wenn man nur 1.1.3. hat, aber die neuen programme nicht? und wenn ja, wie?
dankeschööön schonmal!
Nein, geht nur gegen das Opfer von 17,99 EUR in Steves Kollekte.
allet klar ^^ schade, dann muss ich des wohl so lassen oder, wenn ich mal wieder viel geld hab, mir die dinger anschaffen =)
Was – 17,99€ für so ein Mini-Extra? Da krieg ich ja 7 Döner für!
{ 2 Trackbacks }