Tutorial: Homescreen-Icons für iPhone/iPod/iPad

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:

Code touch icon

Katergorie: iOS Tipps, iPhone Tags: , , , , .

Tom

about me: love apple | social networker | founder of .mactomster | vapor | like motorsport and audi

8 Comments

  1. Pingback: Homescreen-Icons für iPhone » philomenon.

  2. 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:

    • 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.

Kommentar verfassen