Touch Icon für Apple, Android und Windows

Touch Icon für Apple, Android und Windows

Das Favicon für den Desktop-Browser kennt sicher jeder. Mit der explosionsartigen Verbreitung der mobilen Endgeräte in den letzten Jahren wird das Touch-Icon für den mobilen Browser immer wichtiger. Fügt der Nutzer eines Smartphones oder Tablets eine Website „zum Home-Bildschirm“ hinzu, dann wird dort das Touch Icon angezeigt. Wurde kein Touch Icon im System der jeweiligen Website generiert, dann wird nur ein Mini-Screenshot der Website angezeigt. Daher sollte ein Touch-Icons auf der Website integriert sein. Wie das geht, schreibe ich hier.

Apple Touch Icon erstellen und in die Website einbinden

Apple Touch Icons und Windows Kacheln benötigen Grafiken in größerer Auflösung: Je nach Gerät und Version werden Icons in den Größen 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 128×128, 144×144 und 152×152 px benötigt.

Für Windows werden Grafiken in den Formaten 70×70, 144×144, 150×150, 310×150 und 310×310 px benötigt.

Für Apple-Geräte ist als Standard-Icon eine Datei mit 152×152 Pixeln zu empfehlen. Es ist nicht notwendig, für das Icon abgerundeten Ecken oder Glanzeffekte zu generieren, weil dies vom Betriebssystem automatisch gneriert wird.

Falls das Icon im Root-Verzeichnis installiert wurde, kann man auf diesen Meta-Tag verzichten – IOS sucht automatisch das Root-Verzeichnis nach der Datei „apple-touch-icon.png“ ab.

Apple Touch Icons

Beispiele für Apple Touch Icons – Apple Touch Icon in mehreren Größen

Unterschiedliche Gerät und iOS-Versionen zeigen die Website-Icons in verschiedenen Größen an. Wurde das Apple Touch Icon in nur einer Größe eingebunden, dann wird die Bild-Grafik für die anderen Größten entsprechend skaliert. Hierdurch kann es zu Verzerrungen oder Unschärfen der Grafik kommen. Dies kann man vermeiden, indem man das Apple Touch Icon in mehreren Größen zur Verfügung stellt.

Touch Icon für Android

Für Android-Geräte sollte man ein eigenes Touch-Icon einbinden. Google empfielt für die Einbindung eine Dateigröße von 196×196 Pixel.

Windows Touch Icons

Für das Microsoft-Betriebssystem Windows muss man eigene sogenannte Tile Icons einbinden. Die Kacheln auf dem Windows Screen können in verschiedenen Größen und Formaten eingefügt werden.

Von |2018-09-16T12:47:40+00:0017. Juli 2018|Social Media Marketing|