Hinzufügen von Website-Icons für iPhone, iPad und Android-Geräte

So ziemlich jeder Webseitenbetreiber hinterlegt im Wurzelverzeichnis seiner Webseite ein Favicon. Diese kleine Grafik wird dann im Browser-Tab oben neben dem Namen der Webseite angezeigt, genauso wie beim setzen eines Bookmarks bzw. Lesezeichens. Manch einer vergisst jedoch, dass inzwischen etliche Benutzer vorwiegend mit Mobilgeräten bzw. Smartphones Smartphones wie iPhone, iPad oder Android-Smartphones und Tablets Tablets im Internet unterwegs sind. Um auf diesen Endgeräten ebenfalls ein Fav-Icon bereit zustellen, muss man diese explizit innerhalb des Header-Tags in seinen HTML-Code integrieren.

Zunächst eine Übersicht der unterschiedlichen Maße, in denen das gewünschte fav-icon vorliegen muss, weiter unten kommen wir dann zur Einbindung in die Webseite. Man kann auch verschiedene Icon-Größen in einem ICO-File zusammen fassen. Ich gehe hier aber nur auf die Möglichkeit der Einbindung mit einfachen PNG-Dateien ein, welche man allesamt in das Wurzelverzeichnis der Webseite auf seinen Server lädt.

Standard Favicon in 64x64 Pixel - favicon.png:
<link href="/favicon.png" rel="icon" type="image/png" />

Nun hinterlegt man noch Alternativ-Größen (16, 32, 96, 128 sowie 192 Px) für Desktop- und Android-Geräte:

<link href="/icon-16.png" rel="icon" sizes="16x16" type="image/png" />
<link href="/icon-32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="/icon-96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="/icon-normal.png" rel="icon" sizes="128x128" type="image/png" />
<link href="/icon-hires.png" rel="icon" sizes="192x192" type="image/png" />

Nun erstellt man noch die entsprechenden Image-Größen für iOS-Geräte, also für iPhone und iPad. Hierzu wirft man einen Blick in die Apple-Dokumentation zum Thema Icons um die passenden Größen für zum Beispiel das iPhone 6s+, iPad Mini und iPad Pro zu ermitteln. Diese ergeben sich dann wie folgt, wobei das Standard-Icon (das Erste) für Apple die Maße 57x57 Pixel hat:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />

Wer keine Lust hat all die Grafiken selbst zu erstellen, kann auch einen entsprechnenden Generator nutzen, um seine favicons zu generieren. Einen sehr guten Favicon-Generator möchte ich euch an dieser Stelle nicht vorenthalten. Hier kann man einfach eine PNG- oder SVG-Vektor-Grafik hochladen und bekommt den passenden HTML-Code sowie alle erforderlichen Dateien zur Integration in seine Webseite erstellt.

Zuletzt bearbeitet: 24. Dezember, 2016
Tags: , , , , , , , , ,

Verwandte Beiträge

iOS 11 und das Redesign des Appstores

Neun Jahre ist es bereits her, dass Apple seinen App Store ins Leben gerufen hat. Eine riesige App-Plattform welche heutzutage über 2 Millionen Apps beheimatet. Nun wurde der Appstore komplett überarbeitet und neu designed. Die Änderungen und das neue Layout werden demnächst zusammen mit dem neuen Betriebssystem iOS11 eingeführt, welches aktuell als öffentliche Beta verfügbar [...] Weiterlesen »


VR Studie - Spielsteuerung ohne Controller

In den letzten Tagen habe ich mich etwas mit VR (Virtual Reality) und der Umsetzung einer Spielsteuerung beschäftigt, welche ohne Controller auskommt. Als Hardware diente die VR Box 3 (VR-Brille) sowie ein iPhone 6s+ . Ziel war es, sich in einem Raum zu bewegen bzw. allein durch das Ansehen von Objekten mit diesen zu interagieren, ohne [...] Weiterlesen »


Telegram Messenger und die Bot API - Teil 2

Im ersten Teil - Telegram Messenger und die Bot API - bin ich auf einige Grundlagen eingegangen wie man einen Telegram-Bot einrichtet und diesen nutzt um sich Nachrichten, Informationen und sonstiges bequem auf sein Handy zu schicken. Da sich dieses Werkzeug als äußerst praktisch erwiesen hat, habe ich mich dazu entschlossen den vorherigen Beitrag nochmal [...] Weiterlesen »


Apps und Spiele für Apple Watch

Die experimentelle Suchmaschine von Saschas-Bastelstube.de für iOS- und Android-Apps wurde um eine weitere Kategorie und Funktionalität erweitert. Ab sofort findet man hier neben aktuell reduzierten Apps und Spielen auch Software speziell für die Apple Watch (WatchOS). Eine Sortierfunktion nach Kundenbewertungen, um sich schnell die Top-Apps und Top-Spiele  anzeigen zulassen, gibt es jetzt auch. Genau wie ein [...] Weiterlesen »


Unfade - Mobiler Foto Album Scanner

Unfade ist der Fotoalbum Scanner für die Hosentasche.  Die App ist die beste Art analoge Fotoalben in Windeseile zu digitalisieren und sie mit Freunden zu teilen. Die automatische Erkennungs- und Zuschnitt-Funktion ermöglicht es schnell und einfach digitale Kopien der Fotos zu erstellen und die Erinnerungen zu sichern. Außerdem sorgen intelligente Filter dafür, dass verblasste Farben [...] Weiterlesen »