Wer eine Website oder ein Blog betreibt, möchte unter Umständen den Besuchern mit iPhone, iPad oder iPod touch ein passendes Icon anbieten, falls der User die Seite als Lesezeichen auf sein Homescreen ablegen will. Als Standard macht das jeweilige mobile Device dabei ein Screenshot der Webseite und nimmt dies als Icon. Da wirkt es schon erheblich professioneller ein aussagekräftiges Icon der Website anzubieten. Die ist mit nur wenig Aufwand zu realisieren.
Und so geht es:
- das Icon mit einer Größe von 57×57 Pixel oder 60×60 Pixel (schärfer) erstellen und als .png speichern
- der Dateiname muss apple-touch-icon.png sein
- nun einfach die Datei in das Hauptverzeichnis auf den Server hochladen
Das iPhone/iPad/iPod formatiert leider das Icon dann automatisch, sodass man einen Glanzeffekt auf das Icon bekommt. Wenn dies nicht gewünscht ist, muss die Datei anders benannt werden.
- benenne das Icon als apple-touch-icon-precomposed.png
- die Datei in das Hauptverzeichnis auf den Server hochladen
Man kann außerdem das Homescreen-Icon auch per Code einbinden. Dabei ist es dann auch egal wie die Icon-Datei heißt.
Dies geht folgendermaßen:
- Man legt das Icon irgendwo in das gewünschte Verzeichnis auf dem Server ab
- Nun fügt man den folgenden Code im Header der Website ein:
Tags: Homescreen, Touch-Icon, Tutorial, Websnippet
twitterte am 09. März 2010 um 19:11 Uhr
RT @mactomster: Tutorial: Homescreen-Icons für iPhone/iPod/iPad http://goo.gl/fb/WvMb – please retweet! #tippstricks #homescreen
sagte am 10. März 2010 um 20:24 Uhr
Danke, das mit “precomposed” war mir neu!
Btw. man kann auch ein Startbild fürs WebClip festlegen. Es muss dann so eingebunden werden:
Ich glaube, es gelten zum Erstellen die selben Regeln wie für ein eigenes iPhone Book Logo, also:
- 320x480px
- RGB oder Graustufe
- kleiner gleich 100KB (ist es größer, wird es nicht geladen bzw. nur dann, wenn es vorher einmal im Browser aufgerufen wurde. Also: drauf achten!)
Hat man eine für iPhones optimierte Seite und möchte sie mit dem WebClip im Vollbildmodus laden lassen, empfiehlt sich noch folgendes Meta-Tag:
sagte am 10. März 2010 um 20:50 Uhr
Wofür genau ist das? Kannst du mal was verlinken?
sagte am 10. März 2010 um 22:13 Uhr
Okay, hier nochmal der Code für das Startbild (statt [] -> und rel bzw. href natürlich ohne Leerzeichen):
[ link r el="apple-touch-startup-image" hr ef="/example/startup.png"/ ]
Zum Meta-Tag bietet sogar Apple selbst ein bisschen Lesestoff: http://developer.apple.com/saf.....aTags.html
sagte am 10. März 2010 um 22:16 Uhr
Ahh…nein! Ich konnte mich noch nie mit der automatischen Formatierung bei WP anfreunden
Aber du weißt jetzt, wie’s gemeint ist.
sagte am 10. März 2010 um 20:25 Uhr
… oohps, wo ist mein code hin?
sagte am 10. März 2010 um 20:39 Uhr
Den hat die Seite irgendwie verschluckt. Hast du einen Link zu dem Code?
Hinweis: Du gibst als URL immer deinen Twitterlink an. Dadurch denkt meine Seite, es wäre ein Tweet. Damit deine Comments auch als Kommentare hier erscheinen, habe ich den Twitter-Link mal entfernt. Bitte dies beachten. Kannst deinen Link ja in den Kommentar mit einfügen.
twitterte am 15. März 2010 um 19:50 Uhr
Auf dem Lesestapel: Tutorial: Homescreen-Icons für iPhone/iPod/iPad: Wer eine Website oder ein Blog be… http://bit.ly/cRH8I6 #readingpile
twitterte am 26. Juni 2010 um 01:13 Uhr
Und hier habe ich den #Tutorial dazu gefunden: http://www.mactomster.de/2010/.....eipodipad/
twitterte am 27. Juni 2010 um 14:06 Uhr
Schönere Homescreen-Icons für iPhone/iPod/iPad kreieren http://www.mactomster.de/2010/.....eipodipad/
sagte am 02. August 2010 um 14:09 Uhr
Super, vielen Dank für die Info.