12 December 2009 HowTo, Icon, iPhone Robert Muehsig

imageWer ein iPhone (oder ein iPod Touch) sein eigen nennt kann auch sehr bequem im Internet surfen. Dabei kann man auch Lesezeichen auf sein Homescreen setzen. Im Standardfall macht das iPhone dabei ein Screenshot der Webseite und nimmt dies als Icon. Das Favicon ist dem iPhone egal. Professioneller und mit nur wenig Aufwand kann man aber auch sein eigenes iPhone Favicon definieren.

Ziel:

Wir wollen unser eigenes, cooles iPhone Bookmark Icon haben.

Für das optimale Resultat:

  • Größe: 57 x 57 Pixel, wenn es größer ist, skaliert das iPhone das Bild
  • Quadratisch
  • Keine Glossy oder Spiegeleffekte, auch das macht das iPhone
    • Man kann dem iPhone OS auch sagen, dass er dies nicht machen soll. Mehr dazu beim "Einbinden"
  • Keine Alpha Transparenzen
  • Bildformat PNG
  • Fazit: Nur das pure Logo nutzen. iPhone OS macht den Rest im iPhone Style
  • Offizielle Apple Developer Seite

Einbinden ins HTML

1. Variante: Bilddatei ins Stammverzeichnis legen

Das iPhone sucht im Root der WebApp nach folgenden zwei Files:

  • "apple-touch-icon.png"
  • oder "apple-touch-icon-precomposed.png" wenn man schon selber Glanzeffekte hinzugefügt hat.

2. Variante: Bild verlinken

Im Header folgende <link> Tags einfügen:

<link rel="apple-touch-icon" href="/icons/iphone_favicon.png" />

Oder für die Variante, dass man das Icon schon mit Glanzeffekten ausgestattet hat:

<link rel="apple-touch-icon-precomposed" href="/icons/iphone_favicon.png" />  

So eingebaut habe ich die ganze Sache mal bei "DieSachsen.de" :)

Easy, oder? Eine nette Spielerei und sieht auf dem iPhone einfach schicker aus ;)
Die Inspiration von dem HowTo kam von diesem Blogpost, also nicht wundern dass diese ähnlich sind.


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!