HowTo: Ein iPhone Homescreen Icon für die eigene Webseite anbieten
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.
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Letzte Kommentare