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-Android-Converter

Lange Zeit habe ich bei neuen App-Projekten zunächst die Sprachdateien / Language-Files für iOS geschrieben, und diese dann für die Android-Version händisch umgeschrieben. Das war vom Aufwand her immer schnell gemacht solange die Anzahl der implementierten Sprachen und der Umfang der Textbausteine niedrig war. Abgesehen vom Zeitaufwand ist das ganz schön langweilige und stumpfe Arbeit, [...] Weiterlesen »


Apfel-Appstore-Reader - Update 2.0

Wie im Artikel - Apfel-Appstore-Reader - beschrieben, hält sich Apple bezüglich der App-Rankings (Positionierung im Appstore) sehr gedeckt. Auch im Report-Tool (ITC / iTunes-Connect -> Sales & Trends) keinerlei Informationen auftauchen, an welcher Position man sich mit der jeweiligen App in z.B. einer Kategorie wie “Produktivität” befindet, habe ich vor längerer Zeit ein kleines Java-Tool [...] Weiterlesen »


Projekt: Makiwara 2.0

Es gibt bereits unzählige Bauanleitungen im Internet, wie man einen Makiwara (aus Japan stammendes Sportgerät) herstellt. Mein Eigenbau ist daher absolut nicht neu, aber alternativ und vor allem funktional. Ziel des Ganzen ist die Schlagwirkung mit dem iPad aufzuzeichnen und zu analysieren. Desweiteren sind verschiedene Modi möglich um neben Kraft auch ein nettes Reaktionstraining durchzuführen. [...] Weiterlesen »


FileCalendar für iPhone und iPad

Der FileCalendar wurde komplett überarbeitet. Die App ist einzigartig, weil sie sich auf das Speichern von Dateien zum Kalender spezialisiert hat. Die Erinnerung an den Termin reicht aus, damit die Dateien sofort gefunden werden können. Der FileCalendar verfügt über ein neues Layout, kann Zip-Dateien entpacken und hat auch eine integrierte Kamera . Fotos und Filme [...] Weiterlesen »


tedokai.de - Karate-App

Die tedokai.de–Karate–App beinhaltet einige schöne Funktionen wie eine Verwaltung der eigenen Trainerlizenzen. Desweiteren ist es möglich einen individuellen Trainingsplan mit Hilfe des Kihon-Generators zu erstellen und auszudrucken. Der Funktionsumfang im Überblick: • Verwaltung für Trainer-Lizenzen. • Kihon-Generator / Eigenes Kihon-Programm erstellen. • Kihon-Programm als PDF-Datei exportieren, drucken oder per E-Mail senden. • Kihon-Programm als Import-URL [...] Weiterlesen »