Webseiten, Online-Shops, Digitale Medien
Rufen Sie uns an: 037200 828894
Abbonieren


[Valid RSS]

Webseiten Icons für Apple und Android (Apple Touch Icons)

erstellt am 24.11.2014 von Alexandra Bernhard

Es ist nur eine Kleinigkeit. Aber solche Kleinigkeiten können den Unterschied zwischen einem "professionellen Auftritt" und dem "Durchschnittsauftritt von Jedermann" machen. Touch Icons für die Homebildschirme von Mobiltelefonen und Tablets sorgen dafür, das Ihre Kunden die eigene Webseite auf dem Homebildschirm schnell wiederfinden, und sorgen darüber hinaus dafür, das Ihr Unternehmen in den Köpfen der Kunden nachhaltig verankert wird. Wir erklären wie es geht.

Apple hat für das seine Geräte ein eigenes Favicon-Format eingeführt, und Android hat dies weitergesponnen. Diese Fav-Icons werden angezeigt, wenn man eine Webseite auf dem Homescreen des Mobiltelefons ablegt. Für oft besuchte Seiten macht das sogar Sinn. In großen Projekten fällt früher oder später auf das diese Icons fehlen, weil in den Error-Logs häufiger eine Meldung der Art "apple-touch-icon.png not found" auftaucht.

Bewährt hat sich dabei, die Icons in verschiedenen Größen bereitzustellen. Die Geräte entwickeln sich nach wie vor schnell weiter. Durch immer höhere Auflösungen sehen die Grafiken mit wenigen Pixeln dann einfach nicht mehr gut aus, weil sie hochgerechnet werden müssen.

Folgende Tabelle enthält Informationen zu Bild und Format:



Empfohlener Dateiname Empfohlene Auflösung Anmerkung
apple-touch-icon.png 152x152 Pixel Standard Icon für iOS Geräte
apple-touch-icon-precomposed.png 152x152 Pixel Standard Icon für Android Geräte
apple-touch-icon-57.png 57x57 Pixel  
apple-touch-icon-76.png 76x76 Pixel  
apple-touch-icon-120.png 120x120 Pixel  
apple-touch-icon-152.png 152x152 Pixel  


Zu Beachten ist außerdem, das die Ecken bei den Geräten derzeit abgerundet dargestellt werden. Es sollte trotzdem ein rechteckiges Bild verwendet werden, da sich diese Darstellung zukünftig auch ändern kann.




Meta-Tags für die Webseite

Während Apples Geräte die Icons inzwischen automatisch erkennen, benötigt Android zwingend die Angabe eines Meta-Tags. Wichtig ist dabei, das für Android Geräte die Angabe precomposed im Dateinamen vorkommt. Für Apple Geräte empfiehlt sich die Angabe des Meta-Tags trotzdem. Sicher ist und bleibt eben sicher.

Folgende Metatags sollten verwendet werden. Es empfiehlt sich wie immer mit absoluten Pfadangaben zu arbeiten. Da diese uns natürlich nicht bekannt sein können, hier die Angabe eines relativen Pfades. Die Dateien würden im Beispiel also unter dem Pfad liegen, unter dem auch die HTML-Datei aufgerufen wurde:



1
2
3
4
5
6
7
 
<!-- Meta-Tag für Apple Geräte: -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
<!-- Meta-Tag für Android Geräte: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png" />
 



Implementierung testen

Wenn die Icons implementiert wurden, sollte man die Darstellung auf jeden Fall testen. Dazu geht man bei den Geräten folgendermaßen vor:



iOS

Hier öffnet man die Webseite im Browser. Über das Aktionssymbol (Viereck mit einem Pfeil nach oben darin) öffnet man ein Context-Menü. Darin gibt es die Auswahlmöglichkeit "Zum Homebildschirm". Einmal berührt, wandert das Symbol auf den Home-Bildschirm.



Android

Zuerst öffnet man die Webseite. Anschließend fügt man die Seite über das Stern-Symbol zu den Favoriten hinzu. Anschließend öffnet man die Lesezeichen Seite des Browsers, wo die neue Seite neben den Favoriten und zuletzt hinzugefügten Seiten als großes Symbol erscheint. Dort wählt man den Punkt Einstellungen und kann das Symbol darin auf den Homebildschirm verlinken.