Tobias Scheible
Web-Entwickler, Ingenieur & Dozent
Tutorila touch Icons

Datum: Donnerstag, 20. Juni 2013

Autor: Tobias Scheible

Kommentar(e): 4 Kommentare

Kategorie: Aktuelles

Tags: Android, HTML5, Web-Browser, iOS, Favicon, Windows 8, Windows Phone

Icons für Websites

HTML5-Apps werden immer beliebter. Um sie besser integrieren zu können, können Icons hinterlegt werden, die dann auf dem Homescreen angezeigt werden. Ich habe eine Übersicht für die verschiedenen Varianten auf den unterschiedlichen Systemen zusammengesellt.

Web-Browser

Die einfachste Variante sind Favicons. Microsoft hat sie mit dem Internet-Explorer 5 eingeführt, um ursprünglich ein Icon für die Bookmarks bereitzustellen. Mittlerweile werden sie aber auch als Icon bei den Tabs von vielen Web-Browsern angezeigt.

Zum Erstellen nutze ich einfach immer einen Generator. Es gibt zwei Varianten, um ein Favicon einzubinden. Zum einen kann die Datei mit dem Namen favicon.ico im Hauptsverzeichnis abgelegt werden und zum anderen per Eintrag im Header:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

Apple iOS

Apple hat nun mit iOS eine weitere Möglichkeit hinzugefügt. Und zwar kann hier eine Website direkt als Verknüpfung auf dem Homescreen abgelegt werden. Um dafür ein Icon zu konfigurieren, muss ein Meta-Tag Eintrag hinzugefügt werden. Apple hat dazu eine Dokumentation online gestellt. Durch die unterschiedlichen Geräte gibt es mittlerweile vier Varianten an Auflösungen:

<link rel="apple-touch-icon" sizes=”57x57” href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Die Grafiken dafür können auch eckige Kanten haben, da die Geräte selbst die runden Ecken erstellen und einen Glas-Effekt darüber legen.

Android

Für Android ist es ganz einfach, hier funktionieren nämlich die gleichen Anweisungen wie für iOS. Schön, dass es Android genauso unterstützt, wobei mir eine neutrale Variante vom W3C besser gefallen hätte.

Windows 8

Mit der neuen Kachel-Oberfläche von Windows 8 gibt es auch hier die Möglichkeit, eine Website abzulegen. Dafür sind drei Meta-Tag-Anweisungen nötig: Name, Logo und Farbe der Kachel. Alternativ stellt Microsoft einen Generator zur Verfügung.

<meta name="application-name" content="Name"> 
<meta name="msapplication-TileImage" content=logo.png">
<meta name="msapplication-TileColor" content="#123456">

Windows Phone 8

Und zum Schluss noch die Phone Variante von Windows. Ich finde die Oberfläche von Windows Phone 7/8 sieht mit den Kacheln richtig schick aus – mir gefällt die Optik einfach. Auch hier gibt es eine Möglichkeit, Websites auf dem Homescreen abzulegen. Direkt im Internet Explorer auf “Weitere” klicken und dann “Auf Startseite” auswählen. Microsoft hat dazu eine offizielle Anleitung online gestellt.

Der Haken ist allerdings, dass Microsoft keine Möglichkeit vorgesehen hat, die Optik der Kacheln zu individualisieren. Stattdessen wird eine Vorschau der Website erstellt und eingebunden. Was nicht immer ganz gut aussieht. Jetzt haben findige Entwickler aber einfach eine Website erstellt, die aussieht wie eine Kachel. Damit kann man das Problem umgehen, aber Google hat noch einen eleganteren Weg gefunden.

Wenn ein Windows Phone erkannt wird, wird direkt unter dem Suchfeld ein Button eingeblendet, der den Benutzer auffordert, die Seite hinzuzufügen. Wird der Button nun geklickt, blendet Google ein DIV-Element über die komplette Seite mit einem Logo und darunter eine kleine Anweisung, was der User nun machen muss. Der Clou dabei ist, dass die Anweisung einfach abgeschnitten wird, da nur der obere Teil verwendet wird. Und zusätzlich ist das Logo als SVG-Grafik realisiert, dadurch sieht der Screenshot auch immer gut aus.

Kachel hinzufügenk
Windows Phone 8 | Quelle: wpcentral.com
Kachel hinzufügen Windows Phone 8 Screenshot
  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Emely

Hi Tobias, danke, das ist ja mal cool! Du hast mir da echt geholfen, bin froh, deinen Blog gefunden zu haben! 🙂
Gruß Emmy

Philipp

Leider funktioniert das bei Android so wie bei iOS nicht. Bei mir klappt das nicht…

Webdesign

Guter Artikel!

Per

Das ist eine wirklich gute Zusammenstellung. Hab das so auf einen Blick noch nirgendwo gefunden.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben