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

Amazon

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.

Website Fav-Icons für Mobilgeräte

christ schmuck.jpgZunä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" />

amz l music.jpg

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: 23. Mai, 2019
Tags: , , , , , , , , ,

Dies könnte dich auch interessieren

Silly Billy Hair Salon

Es gibt eine neue Kinderapp aus dem Hause wonderkind: Mit der App Silly Billy Hair Salon kann nach Herzenslust gestylt, geschnitten, gewaschen und gefärbt werden. Ob Irokesen-Schnitt, Disko-Look, Sufer-Matte, kurz oder lang, lockig oder glatt – der Fantasie sind keine Grenzen gesetzt. Die Stylingkunden sind lustige Tiere mit niedlichen Charakteren, die genau wissen, was für [...] Weiterlesen »


KING OF KARTS 3D

Mach dich bereit, auf die Plätze, LOS! King of Karts ist ein faszinierendes 3D-Rennspiel! Besiege deine Freunde auf 8 Strecken. 3 unterschiedliche Spielmodi warten auf dich, wobei auch Mehrspieler-Partien mit bis zu 6 Geräten möglich sind. Sammle Power-Up-Items, entdecke Abkürzungen und verborgene Wege, benutze Boostfelder und Sprungschanzen und wage riskante Stunts und Drifts. King of [...] Weiterlesen »


Safari Abenteuer: Wir entdecken Afrika - Brettspiel für Kinder

Safari Abenteuer: Wir entdecken Afrika - Brettspiel für Kinder, Schüler, Familie - von Kindermatica Ltd. Bring Familie und Freunde mit dem Safari-Rätselspiel zusammen! In diesem kinderfreundlichen Brettspiel für mehrere Spieler wirst du die Bewohner der heißen Savanne kennen lernen und erstaunliche Abenteuer in Afrika erleben! Du könntest einen Löwen treffen, dich Regenschauern schützen, eine Brücke [...] Weiterlesen »


Telegram Messenger und die Bot API

Telegram ist im Prinzip ein Messenger ähnlich Whatsapp oder Threema , kostenlos und leicht zu bedienen. Ich möchte nicht sagen das dieser besser oder schlechter ist als andere Messenger, allerdings gefällt mir die Telegram Bot API sogut, dass ich an dieser Stelle ein kleines Tutorial dazu schreiben möchte. Inhaltsverzeichnis:Telegram Messenger Bot API programmierenSchritt 1 - [...] Weiterlesen »


Nützliche Apps für deinen Instagram-Account

Like4Like Pro - Erhalte mehr likes, views und follower bei Instagram. Like4Like PRO - get more likes, video views and followers for Instagram. A dedicated Like4Like user can get over 5000 Likes and 1000 Followers on Instagram per day! Try it out, now! There is no trick, you are going to get real Likes and [...] Weiterlesen »