Touch Icons

Damit Ihre Website für Ihre User immer präsent ist, können Touch Icons mit Ihrem Logo auf der Website hinterlegt werden.

Touch Icons für iPhone, iPad, Android und Windows Phone

iPhone, iPad, Android oder Windows Phone zeigen auf Ihren jeweiligen Home-Bildschirmen einige App-Icons. Damit Sie auf Ihre Favoriten schnell zugreifen zu können, gibt es Touch Icons, die ebenfalls auf dem Home-Bildschirm abgelegt werden. Ist seitens der Erstellers einer Webseite kein Touch Icon eingebunden, wird in der Regel ein verkleinerter Screenshot der Seite angezeigt. Damit ein User Ihre Webseite schnell findet und aufrufen kann, macht es Sinn, dieses Icon aus Ihrem Logo zu erstellen.

Touch Icons für iPhone, iPad und Android Touch Icon erstellen und einbinden

Als Standard Touch Icon sollte eine Grafik der Größe 57 x 57 Pixel im Dateiformat .png erstellt werden. Die Einbindung in die eigene Website im head-Bereich des HTML-Codes ist mit diesem Code möglich:
link rel="apple-touch-icon" href="/images/touch-icon-57.png"

Verschiedene Auflösungen für unterschiedliche Endgeräte

Das Standard Touch Icon wird auf iPhones oder iPads mit hochauflösendem Retina-Display angepasst. Diese Anpassung geht mit einem starken Qualitätsverlust einher. Daher sollten passende Icons in der passenden Größe erstellt werden. Für das iPhone, den iPod und Android Geräte passt das Standard-Icon, für iPads ohne Retina erstellen wir eine Grafik mit 72 x 72 Pixel. Für hochauflösende iPhones gibt es ein Icon der Größe 114 x 114 Pixel, also doppelt so breit und hoch wie das Standard-Icon. iPads mit Retina-Display brauchen ein Icon in 144 x 144 Pixel. Das Einbinden erfolgt nun wie oben, einziger Unterschied mit dem Attribut "sizes" wird die Größe des jeweiligen Icons angegeben.

link rel="apple-touch-icon" href="/images/touch-icon-57.png"
link rel="apple-touch-icon" sizes="72x72" href="/images/touch-icon-72.png"
link rel="apple-touch-icon" sizes="114x114" href="/images/touch-icon-114.png"
link rel="apple-touch-icon" sizes="144x144" href="/images/touch-icon-144.png"

Touch Icon ohne Glanzeffekt

Den Glanzeffekt des Icons kann man durch Ersetzen des obigen Codes durch folgende Zeilen verhindern:
link rel="apple-touch-icon-precomposed" href="/images/touch-icon-57.png"
link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/touch-icon-72.png"
link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/touch-icon-114.png"
link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/touch-icon-144.png"
Mit apple-touch-icon-precomposed wird dem Endgerät mitgeteilt, dass das Icon so dargestellt werden soll, wie wir es entworfen haben, also ohne automatischen Glanzeffekt. Die runden Ecken lassen sich hingegen nicht verhindern.

Unterstützung weiterer Android Geräte

link rel="apple-touch-icon" sizes="76x76" href="/images/touch-icon-76.png"
link rel="apple-touch-icon" sizes="120x120" href="/images/touch-icon-120.png"
link rel="apple-touch-icon" sizes="152x152" href="/images/touch-icon-152.png"

Icons für Windows 8 und Windows Phone

Auch für Windows 8 mit IE 11 und Windows Phone kann man Icons und zusätzliche meta-Daten hinterlegen.
meta name="application-name" content="Titel der Webseite"
meta name="msapplication-TileColor" content="#FFFFFF"
meta name="msapplication-TileImage" content="/images/touch-icon-144.png"
meta name="msapplication-starturl" content="http://www.domain.de"
meta name="msapplication-square70x70logo" content="/images/touch-icon-70.png"
meta name="msapplication-square150x150logo" content="/images/touch-icon-150.png"
meta name="msapplication-wide310x150logo" content="/images/touch-icon-310-150.png"
meta name="msapplication-square310x310logo" content="/images/touch-icon-310.png"
meta name="msapplication-navbutton-color" content="#FFFFFF"
meta name="msapplication-tooltip" content="Titel der Webseite"

Quelle: Patrick Saar

Mit EMSIG-DESIGN ist Webdesign ist gar nicht mehr so schwer !

Designbüro

Emsig-Design
Web | Print | Möbel

Bürozeiten: 
Montag bis Donnerstag;
9:00 - 16:00 Uhr  
und nach Vereinbarung

+ 49 5641 748 335
+ 49 175 499 40 97
Am Runden Berg 51a  
34414 Warburg
info(at)emsig-design.de
kollektion5(at)emsig-design.de

 

Veranstaltung geplant?

Tag der offenen Tür

Wir bewerben Ihre Veranstaltung mit allem Drum und Dran

Für Ihren Event entwerfen wir Einladung, Zeitungsanzeige, Werbebanner, Fahnen, Werbemittel etc.

... und eine Extraseite für Ihre Website

... und erstellen einen Facebook-Beitrag in Ihrem FB-Konto

DIE MACHER

Handwerkj und Design aus Warburg

Wir machen das Bummeln durch Warburgs Innenstadt attraktiver!