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