MAWie man ein „Favicon“ als Aushängeschild seiner Homepage den Besuchern zur Verfügung stellt, darüber gibt es eine Menge zu lesen. Im Prinzip benötigt man dafür eine Graphik (wie das Logo der Homepage) oder ein aussagekräftiges Bild im Format „ico“, welches dann im Wurzelverzeichnis der Homepage unter dem Namen „favicon.ico“ abgelegt werden sollte. Für die modernere Variante des Favicon als „touch-Icon“ bei Mobilgeräten wie Tablets und Smartphones wird eine deutlich höhere Auflösung als die der winzigen „früheren Icons“ (mit 16×16 oder 32×32 Pixeln) benötigt.
Ansicht der Favicons · Bildschirmfoto mit Firefox, wo die Favoriten als wichtige Seiten bezeichnet werden.
Weil einige Projekte noch kein Favicon hatten und entweder gar nichts oder das bereits vorhandene Icon des „WordPress“-Themes angezeigt wurde, wollte ich dies nun aktualisieren. Nach der Konvertierung des Bildes mit „Convertico“ (PNG zu ICO Konverter) und Ablegen im Wurzelverzeichnis weigerte sich mein iPad trotzdem hartnäckig, das neue Favicon anzuzeigen – aber warum? Nach kurzer Suche bekam ich alle möglichen Tipps und HTML-Befehle mit den unterschiedlichsten Optionen vorgeschlagen, wie den in der folgenden Code-Box.
HTML-Befehl im Header für „Favicon“, der nicht funktioniert hat.
<link rel="shortcut icon" type="image/x-icon" href="https://www.mamedi.de/favicon.ico">
Häufig erwähnt und auch bei „Selfhtml“ gefunden
Die Angabe „image/x-icon“ zum Typ des Bildes scheint ein ganz schön alter Hut zu sein, die beim Versuch der Aktualisierung von MAMEDi sowie anderen Favoriten auf dem iPad das Anzeigen des neuen Favicons irgendwie blockierte. Als ich die Angabe einfach weggelassen habe, wurde nicht mehr das ältere Favicon, sondern unmittelbar das neue angezeigt. Es hat direkt funktioniert.
HTML-Befehl im Header für „Favicon“, der sofort funktioniert hat.
<link rel="shortcut icon" href="https://www.mamedi.de/favicon.ico">
HTML-Befehl ohne „image/x-icon“ · Lösung bei „Stackoverflow“ und „Selfhtml“ (weiter unten) gefunden
Seltsam, ich habe keine Ahnung, was da wirklich genau passiert ist. Vielleicht widersprachen sich die beiden Angaben und hatten miteinander konkurriert, wodurch die Aktualisierung verhindert wurde. Wie es sich bei Android-Geräten verhält, weiß ich im Augenblick nicht, da ich selber keines besitze. Insofern nervt es mich jedenfalls nicht, so wie das beim iPad der Fall war. Die Sache ist erledigt und hier folgen nun die Favicon-Beispiele in großer Version.
Das Favicon muss nicht unbedingt eine Graphik sein. Dafür kann auch ein Foto oder eine Schrift der Homepage – siehe „Marimba-Festiva“ oder „HP Krause“ – genommen werden. Sogar ein einzelner Buchstabe (beim Favicon des „Genesis“-Framework ein weißes „G“ vor schwarzem Hintergrund) kann aussagekräftig sein. Am Besten sind einprägsame Motive mit Wiedererkennungswert.
„Favicon“-Angaben bei MAMEDi
<link rel="shortcut icon" href="https://www.mamedi.de/favicon.ico">
<link rel="icon" href="https://www.mamedi.de/favicon.ico">
<link rel="apple-touch-icon" href="https://www.mamedi.de/MAMEDi-Logo.png">
<link rel="shortcut icon" type="image/png" href="https://www.mamedi.de/MAMEDi-Logo.png">
<link rel="icon" type="image/png" href="https://www.mamedi.de/MAMEDi-Logo.png">
Derzeit (Februar 2018) benutze ich bei MAMEDi diese fünf Optionen
Für verschiedene Betriebssysteme werden laut „Selfhtml“ vier Formate benötigt. Bei älteren Browsern das „favicon.ico“, für moderne Desktop-Browser das „favicon.png“, ein „apple-touch-icon“ für Apples iOS (und andere) sowie eine „Icon-Kachel“ (Windows 8 und 10). Weil Browser anscheinend immer nach einem „Favicon“ suchen, sollte am Besten auch eines vorhanden sein.
Mal schauen, was sich da noch so alles ändert …
Kommentar schreiben!