Ganz ehrlich. Ich wusste bis vor kurzem nicht, was ein solches Icon überhaupt ist. Erst als ich mich bezüglich meinem neuen Favicon auseinandersetzte, bin ich zufälligerweise auf den Begriff Apple Touch Icon gestossen. Dann war mein Interesse vollends geweckt und ich musste schlussendlich auch ein solches Icon erstellen. Aber worum geht es dabei überhaupt?

Was ist ein Apple Touch Icon?

Dieses Icon stellt auf deinem Apple Device ein Symbol dar, sofern jemand deine Webseite auf dem Homescreen speichert. Es ist also ähnlich wie das Favicon, ein Icon, dass mit der Webseite verknüpft ist.

Verfügt deine Webseite nicht über ein solches Touch Icon, dann zeigt sich auf deinem Apple Gerät lediglich eine kleine Webseiten-Vorschau als Icon, wenn du deine Webseite auf dem Homescreen speicherst. Das sieht natürlich nicht ganz so sexy aus. Dementsprechend lohnt sich das Erstellen von einem Touch Icon allemal.

Wie ein Apple Touch Icon erstellen?

Wie schon für’s Favicon, habe ich auch in diesem Fall mit Adobe Photoshop CC ein neues File erstellt. Und zwar in der Grösse 180×180 Pixel. Jenes habe ich dann meinen Wünschen entsprechend bearbeitet und schlussenlich als “apple-touch-icon.png” gespeichert.

Und so sieht es schlussendlich aus:

Apple Touch Icon von phPics Photography

Zur Webseite hinzufügen

Nachdem das Icon final gespeichert wurde, musste ich es lediglich zur Webseite hinzufügen. Dafür habe ich es via FTP in das Hauptverzeichnis meiner Seite geladen. Anschliessend folgte noch die Verifizierung in der Praxis. Nämlich habe ich auf meinem Apple iPhone meine Webseite www.phpics.ch über Safari aufgerufen und jene dann zum Homebildschirm hinzugefügt. Sofern alles geklappt hatte, sollte sich nun auf deinem Handy das von dir erstellte Touch Icon vorfinden. 😉 Und zwar mit schön abgerundeten Ecken, wie sämtliche anderen Apps auch.

Wie sieht es bei dir aus? Hast du diesbezüglich auch schon Erfahrungen gesammelt? Wie hast du es bei deiner Webseite gelöst? Sind da auch Apple’s Touch Icon und ein Favicon im Einsatz oder verzichtest du auf diese Symbole?

appletouchicon