Give Your Website an iOS Home Screen Icon

Schon wieder in eigener Sache, liegt das zur Zeit an der neu erwachten Freude am Bloggen und den fehlenden Apple-News über die wir berichten könnten. Wir können sonst aber auch gern über Fahrräder oder Autos berichten. Doch sei es drum, dies soll nunmehr die letzte selbstbezogene Meldung sein.

Wenn man eine Website auf seinem Homescreen auf seinem iOS Device ablegt, dann nutzt iOS zunächst die Hookline der Webseite und generiert aus einem Screenshot das Logo. Wem das aber nicht passt, weil er selber ein Logo hat und seinem Corporate Design (CI) Vorschub leisten möchte, dem sei folgende Info ans Herz gelegt.

Man kann iOS mitteilen, dass wenn eine Website abgelegt wird, ein bestimmtes Symbol dafür genutzt werden soll. Und das tolle: man muss nur das Symbol auf seinem Webserver hinterlegen, den ganzen Shiznit wie runde Ecken oder Schatten etc. baut iOS automatisch dran, das muss man vorher nicht selber designen. Logo in eckig reicht. Man kann auch verschiedene Auflösungen hinterlegen, für Non-Retina und Retina-Displays, das erkennt er dann automatisch und nimmt das jeweils passende.

thafaker.de Homebutton iPad 2 (low Resolution)

So sieht das thafaker.de Home Screen Icon also in geringer Auflösung auf einem non-Retina iPad 2 aus.

![non-Retina iPad 2](

thafaker.de Homebutton iPhone 5 (high Resolution)

So sieht das Logo, es ist etwas erweitert, aus, wenn man thafaker.de auf einem Retina-Device zum Homescreen hinzufügt.

![](https://thahipste

Und so sieht der abgelegte Button aus. Man sieht, es ist ein leicht anderer Button, der Retina-Button enthält noch den thafaker | TBDTTT-Schriftzug.

thafaker.de Homebutton Android (high Resolution, OPO)

Als netter Nebeneffekt (ungewusst) funktioniert das wohl auch mit Android. Ich weiß allerdings nicht, ob dort nur das Favicon genutzt wird, oder ob er tatsächlich auch auf die Logo-Ressourcen der iDevices zurück greift. Sieht zumindest genau so gut aus.

Klar bleibt letztendlich die Frage, wer sowas am Ende nutzt, wer also thafaker.de auf seinen Homescreen legt - aber egal! :-) Coole Seiten haben solch ein Feature, wir also auch.

Wenn Bedarf besteht, schreiben wir auch gern ein HowTo, wie das ganz genau geht.

Give Your Website an iOS Home Screen Icon