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

App des Tages: Mekorama

Die heutige App des Tages heißt Mekorama! Bewege einen Roboter durch über 50 Level. Grafisch ansprechend aufbereitet ist dieses Spiel ein echter Knaller, nicht umsonst steht die App schon seit einiger Zeit in den Top 10 der Download-Charts und hat schon allein im Android-Appstore knapp 40.000 fast durchweg 5-Sterne Bewertungen. Neben den bereits integrierten liebevoll [...] Weiterlesen »


Kleiner Tiger - Interaktive Kinderapp

Kleiner Tiger: Feuerwehr, Raumschiff, U-Boot - Die neue interaktive Kinderapp von wonderkind. Mit unserer neuen App können Kinder mit einem Feuerwehrauto, einem Raumschiff und einem U- Boot viele spannende Abenteuer erleben. Kinder können jedes Fahrzeug komplett selbst steuern und sich sogar einen eigenen Fahrer und Beifahrer aussuchen. • 4 witzige, süße Tiere: Panda, Tiger, Einhorn [...] Weiterlesen »


Rezeptbuch-App - Rezepte verwalten, teilen und mehr

Mit der Rezeptbuch-App kannst du deine Rezepte komfortabel verwalten. Erstelle deine eigene wundervolle Rezeptsammlung mit leckeren Ideen zum Kochen, Braten, Grillen und Backen. In der aktuellen Version (iPhone, iPad und Android) der Rezeptbuch-App wurde ein eigener Backup-Dienst integriert. Nun ist es möglich, neben einem Backup deiner Rezepte in der iCloud (iOS) bzw. Google-Drive (Android), die [...] Weiterlesen »


Die Rezeptbuch-App

Die Rezeptbuch-App für iPad, Mac und Android. Ein Schmuckstück in jeder Küche. Mit dieser wundervollen Rezeptbuch App hast du deine kulinarischen Eigenkreationen, Omas Familienrezepte und die Lieblingsrezepte deiner Freunde an einem Ort. Und mit den praktischen Kategorien finden deine liebsten Gerichte, Vorspeisen, Salate, Suppen und Partyrezepte übersichtlich ihren Platz. Endlich hat die Zettelwirtschaft ein Ende! [...] Weiterlesen »


Raspberry Pi und weitere Mini-Computer

Der Raspberry Pi ist nach wie vor einer der beliebtesten Mini-Computer. Dieser und andere Kleinst- und Einplatinencomputer sind nicht nur bei Bastlern und Hobbyschraubern beliebt. Kostengünstig, flexibel im Anwendungsbereich und mit ausreichend CPU-Leistung und Arbeitsspeicher ausgestattet, um auch etwas komplexere Aufgaben lösen zu können. Ethernet-Anschluss, HDMI-Ausgang, und Quadcore-CPUs mit über 1 Ghz machen Spass und [...] Weiterlesen »