Favicons / Touch Icons für den Homescreen für iOS und Android Endgeräte

Spezielle Favoriten Icons für iOS und Android auf der eigenen Webseite hinterlegen

Mobile Endgeräte (Handys und Smartphones) mit Internetanbindung werden immer beliebter und auch die Nutzung von Tablet PCs nimmt immer weiter zu. Sehe ich mir die Statistiken meiner Webseiten an, ist ein deutlicher Trend in diese Richtung zu erkennen! Daher sollte man als Webmaster auch dafür sorgen, dass die Nutzung der eigenen Webseite für diese Endgeräte sauber funktioniert.

Daher möchte ich Euch heute kurz erklären, wie man es schafft schöne Bookmarks am Home-Bildschirm von Apples iOS und Google Android Systemen zu erzeugen! Denn optimiert man seine Webseite in diesem Bereich nicht, werden im Normalfall hässliche Logos automatisch erstellt.

Wie so etwas aussieht, könnt ihr hier sehen:

Wie man sieht ist das automatisch erzeugte Logo nicht gerade eine Augenweide und bietet keinen großen Wiedererkennungswert! Hier geht es vielleicht gerade – da mein Logo direkt links oben drin pappt, wer jedoch einen großen Header nutzt wird wohl in diesem kleinen ICON nicht viel erkennen!

Doch wie lösen wir dieses Problem?

Eigene ICOS für diese Art von Endgeräten müssen her und wir müssen den Endgeräten auch mitteilen, dass diese neuen Bilder auch für den Homescreen / Lesezeichen verwendet werden sollen!

Anleitung: Eigene Touch-Icons für iOS und Android verwenden!

Schritt 1: Eigene neue Icons für die Favoritenerstellung werden benötigt!

Als die ganze mobile Nutzung der Webseiten begann, reichte es aus nur ein Bild für diese Art von Verwendung zu hinterlegen! Damals reichte eine Auflösung von 57×57 Pixel aus – doch die Auflösungen wurden immer besser und besser und so sollte man, um alle gängigen Bildschirmauflösungen abzudecken, inzwischen 4 verschiedene Bilddateien hinterlegen!

Diese wären
– 57×57 Pixel
– 72×72 Pixel
– 114×114 Pixel
– 144×144 Pixel

Die Logos sollten im *.png Format erstellt werden!

Wer sich diesen Aufwand sparen möchte, kann auch nur die kleinste Auflösung verwenden! Die mobilen Endgeräte werden dann diese verwenden! Dies ist zwar von der Optik vielleicht nicht ganz optimal – aber immer noch besser als gar kein hinterlegtes Logo, bzw. das automatisch erstellte Icon!

Schritt 2: Updoad der Icons in den eigenen Webspace
Wer nur ein einziges Logo verwenden möchte – für den habe ich eine Quick and Dirty Lösung!
Dafür kopiert ihr das Logo einfach wie ein Favicon in das Rootverzeichnis Eures Webspaces! Dabei muss das Logo folgende Bezeichnung haben:

Variante 1: apple-touch-icon.png
Empfohlene Variante! Da mit dieser Bezeichnung auch Androidgeräte zurecht kommen! Aber Achtung! Hier legen Apple Endgeräte den typischen Apple Style Look über das Logo! D.h. Euer Logo sollte dafür normal gestaltet sein!

Variante2: apple-touch-icon-precomposed.png
Hier werden keine Effekte von Apple Endgeräten hinzu gefügt!

Wer allerdings sauber und mit mehreren Logos arbeiten möchte, dem empfehle ich folgenden weg!
–> Upload der Bilder in einem bestimmten Bereich des Webspaces
–> Verlinkung dieser Bilder im Header der Seite!

 

Und dies geht so!

<link rel="apple-touch-icon" href="http://deinewebseite.de/images/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72×72" href="http://deinewebseite.de/images/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114×114" href="http://deinewebseite.de/images/touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144×144" href="http://deinewebseite.de/images/touch-icon-ipad3.png" />

 

 

Keine Verbesserung der Bilder durch Apple Produkte:
<link rel=”apple-touch-icon-precomposed" href="http://deinewebseite.de/images/touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="http://deinewebseite.de/images/touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="http://deinewebseite.de/images/touch-icon-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144×144" href="http://deinewebseite.de/images/touch-icon-ipad3.png" />

 

 

Wer WordPress verwendet und das “Image Verzeichnis” des Styles verwenden möchte kann dies mit folgenden Zeilen tun:

—> <link rel="apple-touch-icon" href="<?php bloginfo('stylesheet_directory‘); ?>/images/touch-icon-iphone.png” />

Fertig!
Habt ihr alle Punkte sauber erledigt, sollte die Anzeige beim Abspeichern von Webseiten auf dem Home-Desktop wie folgt aussehen:

 

Sieht doch schon viel besser aus!

Viel Spaß bei der Umsetzung!