Übersicht
IT System & Netzwerk
Blog & Newsfeed
Rechtslage
Apple Touch Icon | SEO Agentur Köln - Frank Balzer
71
post-template-default,single,single-post,postid-71,single-format-standard,cookies-not-set,bridge-core-1.0.1,ajax_fade,page_not_loaded,,qode-title-hidden,qode_grid_1400,side_area_uncovered_from_content,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-theme-ver-2.0.1,qode-theme-security edition,disabled_footer_top,qode_header_in_grid,wpb-js-composer js-comp-ver-5.7,vc_responsive
Frank Balzer Web DeveloperSeo Agentur Blog - Designer Team Cologne - SEO Web Agentur

Apple Touch Icon

Apple Touch Icon Einbindung

Seit der Einführung von mobilen Endgeräten ist das sogenannte Apple Touch Icon auch für Webseiten Betreiber ein wichtiger Bestandteil, sich von der breiten Masse mit einem individuellen Lesezeichen Favicon zu unterscheiden. Lernen Sie hier den richtigen Umgang mit Apple Touch Icon und wie diese auch für Android und Windows eingesetzt werden können.

Seitdem Einzug von Tablets und Smartphones gibt es zu den Microsoft Favicons nun auch die sogenannten Windows Tile Icons und seit einiger Zeit auch für Apple Endgeräte die Touch Icon, welche in den Meta Tags integriert werden. Somit hat der User beim abspeichern seiner Favoriten im Browser das Firmenlogo als hochauflösende Grafik zur Ansicht. Der Sinn dahinter ist eine ansprechendere Optik als Eyecatcher zu erzielen.

apple touch icon

Da iPads und iPhones unterschiedliche Auflösungen haben, gilt es die herkömmliche Größe von 144 x 144 Pixeln bis iOS 6, nun auf 152 x 152 Pixeln für iOS 7 anzugleichen. Dabei sollte auf Effekte wie Schlagschatten, Glanz oder ähnliches verzichtet werden, da diese vom jeweiligen Betriebssystem angepasst werden! Der Glossy Effekt entfällt ab iOS 7 eh komplett.

Für den Einsatz von Apple Touch Icon mit einer Größe von 144×144 (ab iOS7 152×152) wird die entsprechende Grafik als PNG mit der Bezeichnung “apple-touch-icon.png” in das Hauptverzeichnis der Webseite abgespeichert und im Header Bereich folgender Code eingefügt:

Nur iOS:

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>

Allerdings wird mit dieser Standardgröße noch nicht jede Auflösung abgedeckt und auf den verschiedenen Endgeräten unscharf angezeigt. Um diesen Nachteil zu beheben sollten optional mehrere Größen zur Verfügung gestellt werden.

iPhone & iPod Touch ohne Retina benötigen 57x 57 Pixel

<link rel=”apple-touch-icon” href=”/apple-touch-icon-57×57.png” />

Ein Vorteil mehrerer Icons besteht darin, dass verschiedene Bildvorlagen verwendet werden können. So ist es möglich für z.B. iPhone und iPad unterschiedliche Größen zu verwenden.

iPad benötigt 76×76 Pixel (vorher iOS6 72×72)

<link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-touch-icon-76×76.png” />

iPhone mit Retina Display benötigt 120×120 Pixel (vorher iOS6 114×114)

<link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-touch-icon-120×120.png” />

iPad mit Retina Display benötigt 152×152 Pixel (vorher iOS6 144×144)

<link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-touch-icon-152×152.png” />

Apple Touch Icon für Android

Für Android Systeme muss die Angabe von “precomposed” dem Dateinamen angehangen werden!

Um wirklich alle mobilen Endgeräte auf iOS und Android zu erreichen, empfiehlt es sich mit beiden Varianten zu arbeiten. apple-touch-icon.png und apple-touch-icon-precomposed.png

Die effektivste Lösung: Verwendung einer 144 x 144 Pixel PNG Grafik (ab iOS7 152×152) im Hauptverzeichnis ablegen und folgenden Code den Meta Angaben hinzufügen:

<link rel=”apple-touch-icon” href=”/apple-touch-icon-precomposed.png” />

Nun werden alle Android Betriebssysteme sowie iOS angesprochen. Für eine professionelle Performance Ihrer Webseite auf allen Engeräten sollten generell alle Icon eingebunden werden. Da es noch keinen einheitlichen Code für die Icon Vergabe gibt und Sie nicht wissen, welches Endgerät Ihre Kunden oder Ihre potenziellen Interessenten haben. Sind Sie denoch auf der sicheren Seite und dürften nun auf allen Endgeräten eine sauberer Auflösung erzielen.

Vermeiden Sie daher kostspielige Experimente! Testen Sie meine Leistungen…

Jetzt informieren… Lassen Sie sich von mir eine Marktanalyse zu Ihrem Online Projekt erstellen. Nur so erhalten Sie alle relevanten Informationen zu Ihrem Vorhaben, um mit einer durchdachten Strategie Ihren Internetauftritt erfolgreich umzusetzen.

Frank Balzer, Web Developer aus Köln.

Google Page Rank | Frank Balzer