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.

Website Fav-Icons für Mobilgeräte

kraken.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" />

kraken l.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.

Author: Sascha von Saschas-Bastelstube.de

Autor: sascha

Ein paar Worte über mich selbst. Mein Name ist Sascha, wie der Titel dieses Blogs erahnen lässt. :-) Ich bin von Beruf selbstständiger Programmierer und Trader. Neben Programmierung, Trading und Kampfsport sind einige meiner Interessen und Hobbys das Kochen, Fitness und das Hören lauter Heavy-Metal Musik. :D

This might also be interesting for you

Privacy Browser für mehr Sicherheit und Privatsphäre

Mehr Datenschutz, Sicherheit und vor allem mehr Privatsphäre im Internet wird von allen Seiten gefordert, und das nicht erst nach dem Inkrafttreten der EU-weiten Datenschutz-Grundverordnung (DSGVO / Datenschutz ). Generell kann man diesen Wunsch durchaus nachvollziehen, denn wer möchte schon freiwillig großen IT-Konzernen erlauben die eigenen Daten weiterzugeben, zu verkaufen und wer weiß was damit … „Privacy Browser für mehr Sicherheit und Privatsphäre“ weiterlesen


Trainingsgerät: Makiwara 2.0

Ein Makiwara ist ein aus Japan stammendes Sportgerät, welches man im Karate vor allem als Schlagpfosten aus Holz kennt. Früher (und zum Teil heute noch) fertigt man einen Makiwara aus einem biegsamen und nicht-splitternden Holzbrett. Das eine Ende des Brettes wird senkrecht in den Boden getrieben, und das andere Ende im oberen Bereich (ca. 10-20cm) … „Trainingsgerät: Makiwara 2.0“ weiterlesen


DIYS Smart-Home V1 - Irgendwo muss man ja anfangen!

Schon seit einiger Zeit plane ich mein Smart-Home. Neben dem Kostenfaktor für all die tollen Dinge die ich mir so vorstelle fehlt es oft an der notwendigen Zeit zur detailierten Planung und Umsetzung. Daher habe ich beschlossen einfach mal irgendwo anzufangen und dieses DIY-Projekt parallel niederzuschreiben...mal sehen wohin das führt...Ich bitte um Nachsicht wenn ich … „DIYS Smart-Home V1 - Irgendwo muss man ja anfangen!“ weiterlesen


Fitnessboard v1 - DIYS

Am Wochenende hatte ich glücklicherweise mal wieder etwas Zeit zum Basteln und dazu noch eine ganz nette Idee für ein Fitness-Board für das Training zuhause, welches aus der Liegestütz-Position bedient wird. Ein Video dazu gibt es weiter unten in diesem Artikel und im Youtube-Channel von tedokai.de. Jeder der Zuhause dann und wann Sport betreibt kennt … „Fitnessboard v1 - DIYS“ 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 … „Telegram Messenger und die Bot API - Teil 2“ weiterlesen