Was ist ein Favicon?

Wikipedia erklärt den Begriff Favicon wie folgt:

Ein Favicon ist ein sehr kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Es erscheint auch in der Lesezeichenliste (Favoriten), bei den Registerkarten und unter Windows beim Speichern einer Seite. Die Einführung geht auf den Computerkonzern Microsoft zurück, dessen Internet Explorer 5 im Jahr 1999 erstmals Favicons darstellte.

Auf die Größe kommt es (doch) an

Allerdings ist diese Erläuterung nicht mehr ganz aktuell: von den im Jahr 2017 aktuellen Browsern zeigt lediglich der Internet Explorer 11 das Favicon in der Adresszeile an. Und es fehlt die Information, dass von Microsoft ab Internet Explorer 9 außer 16×16 und 32×32 Pixel noch weitere Icon-Größen unterstützt werden: 24×24 und 64×64 Pixel.

Letzteres ist insbesondere im Hinblick darauf wichtig zu wissen, weil man seit Windows Vista aus dem Internet Explorer 9 (und neueren Versionen) heraus einen Webseiten-Link zum Start-Menü hinzufügen kann. Ab Windows 7 kam dann noch die Möglichkeit dazu, einen Website-Link zur Windows Taskleiste (Taskbar) hinzuzufügen, um häufig genutzte Webseiten schnell öffnen zu können.

In beiden Fällen wird dann – sofern vorhanden – die Favicon-Größe 64×64 Pixel verwendet. Ist jedoch in der Icon-Datei (.ico) kein 64×64 Pixel Icon vorhanden, wird das größte in der Datei enthaltene Icon verwendet und auf 64×64 Pixel vergrößert – was dann natürlich meistens ein unscharfes Ergebnis liefert.

Hier in der ersten Abbildung dargestellt der Zustand des Drag&Drop-Vorgangs bevor man den Website-Link auf der Taskbar „fallen lässt“. Darunter ist der fertige Shortcut auf der Taskbar (in Windows 10) abgebildet:

Geniales Favicon-Tool: der X-Icon Editor

Wer also für Internet Explorer 9 und neuer ein Favicon erstellen will das immer gut aussieht, dem empfehle ich den X-Icon Editor. Mit Hilfe dieses genialen und einfach zu bedienenden Online-Werkzeugs erstellen wir seit Jahren die Favicons für unsere Kunden-Websites. Denn es speichert alle vier vom Internet Explorer (bzw. von Windows für die Taskbar) unterstützten Pixelgrößen des Favicons in einer favicon.ico ab.

Wo wird das Favicon angezeigt?

Wer jetzt noch rätselt, wofür ein Favicon eigentlich gut ist und wo es angezeigt wird, hier sind Screenshots von den drei gängigsten Browsern dazu (das Favicon ist jeweils rot umrandet):

Browser zum Anzeigen des neuen/geänderten Favicons „zwingen“

Nun aber zum eigentlichen Auslöser für den heutigen Quick-Tipp. Seit Jahren erlebe ich es bei der Erstellung neuer Kunden-Websites immer wieder, dass trotz korrektem Einbau das Favicon in der Webseite nicht im Browser angezeigt wird. Das gilt ganz besonders beim Worldsoft-CMS, bei dem nach der Grundeinrichtung des CMS durch Worldsoft bereits ein „Dummy“-Favicon (das Firmenlogo der Worldsoft AG) installiert ist.

In der Regel ist es so, dass wenn ich die Website mit dem neuen oder geänderten Favicon zum allerersten Mal im Browser aufrufe, das neue Favicon dort auch sofort korrekt angezeigt wird. Wurde die Website jedoch bereits vorher einmal in diesem Browser geöffnet, hängt es sehr vom jeweiligen Browser ab, ob dieser das neue Favicon sofort anzeigt oder nicht.

Ich arbeite meistens mit Mozilla Firefox, aber Worldsoft-CMS Websites bearbeite ich aus diversen Gründen seit über zwei Jahren in der Regel mit Google Chrome. Meiner Erfahrung nach zeigt Chrome ein geändertes Favicon sofort an. Manchmal muss ich jedoch auch bei Chrome „nachhelfen“, d.h. die Website forciert mit der Tastenkombination STRG+F5 vom Webserver neu laden.

Im Firefox jedoch hilft in der Regel auch kein erzwungenes Neuladen der Seite vom Webserver. Auch beim Internet Explorer kann ich mich aus Zeiten, als ich noch verstärkt mit dem IE gearbeitet habe, an vergebliche Neulade-Versuche erinnern.

Was läuft da schief?

Der Grund für dieses Fehlverhalten dürfte an der Art und Weise liegen, wie die verschiedenen Browser die Zwischenspeicherung (das Caching) der Favicons für Lesezeichen (Bookmarks), Registerkarten (Tabs), usw. handhaben.

Meine Versuche vor einigen Jahren hatten nämlich bereits ergeben, dass das Problem verschwand, wenn ich für das geänderte Favicon einen anderen Dateinamen verwendete als den Dateinamen des bisherigen Favicons. Da die Browser aber standardmäßig im Hautverzeichnis der Website nach einem Favicon mit dem Dateinamen favicon.ico suchen, wollte ich keinen anderen Dateinamen wählen. Ganz einfach um beim Standard zu bleiben und unsere Kunden und mich vor unliebsamen Überraschungen in der Zukunft zu schützen.

Die Lösung des Problems

Heute lief ich wieder einmal genau in dieses Problem. Deshalb nahm ich mir die Zeit erneut zu recherchieren, nachdem meine Recherchen vor ein paar Jahren ja leider erfolglos geblieben waren. Und siehe da – ich wurde fündig! Es ist unglaublich – wenn man die Lösung weiß und sieht, wie einfach diese ist, könnte man schon den Kopf schütteln ob der Tatsache, dass man nicht selbst darauf gekommen ist…

Hier die kurze und simple Vorgehensweise um den Browser zur Anzeige des Favicons zu „zwingen“:

  1. Aufruf der Website, dabei jedoch den Pfad zur Favicon-Datei hinten an die URL anhängen:
    Beispiel: www.fx-web.de/favicon.ico
    Der Browser zeigt im Inhaltsfenster nur das Favicon an.
  2. Jetzt das Neuladen dieser Seite mit der für den jeweiligen Browser gültigen Tastenkombination (STRG+F5, STRG+SHIFT+R, etc. – siehe auch unten) erzwingen.
  3. Jetzt die Website wie üblich aufrufen:
    Beispiel: www.fx-web.de
  4. Sollte das noch nicht reichen, muss der Browser (alle Fenster!) geschlossen und neu geöffnet werden. Spätestens jetzt sollte jedoch das geänderte Favicon korrekt angezeigt werden.

Das war’s schon!

Ich habe diesen Vorgang mit allen gängigen Browsern auf Windows PC’s erfolgreich getestet. Da mir jedoch kein Mac zur Verfügung steht hoffe ich, dass es auch für den Safari Browser auf der iOS Plattform funktioniert. Gerne können Sie uns Ihre persönliche Erfahrung (bitte mit detaillierten Versionsangaben zum Betriebssystem und Browser) unten über die Kommentarfunktion mitteilen.

Browser-Tastenkombinationen zum erzwungenen Neuladen einer Seite

Das „erzwungene“ Neuladen (engl.: hard refresh oder auch hard reload) einer Website-Seite kann in den gängigen Browsern wie folgt erreicht werden:

Google Chrome

Windows / Linux:

  • STRG-Taste gedrückt halten und F5-Taste drücken, oder
  • STRG-Taste und SHIFT-Taste gedrückt halten, dann die R-Taste drücken, oder
  • STRG-Taste gedrückt halten und mit der Maus auf den Neu laden-Button klicken, oder
  • Mit der F12-Taste die Entwicklertools öffnen, dann Rechtsklick (oder langer Linksklick) auf den Neu laden-Button und den gewünschten Menübefehl aus dem Kontextmenü auswählen:

    Chrome - Kontextmenü des Neu-Laden-Buttons

    Chrome – Kontextmenü des Neu-Laden-Buttons

Mac:

  • CMD-Taste („Apfel-Taste“) und SHIFT-Taste (Taste mit Pfeil nach oben) gedrückt halten, dann die R-Taste drücken, oder
  • SHIFT-Taste gedrückt halten und mit der Maus auf den Neu laden-Button klicken

Mozilla Firefox

Windows / Linux:

  • STRG-Taste gedrückt halten und F5-Taste drücken, oder
  • STRG-Taste und SHIFT-Taste gedrückt halten, dann die R-Taste drücken

Mac:

  • CMD-Taste („Apfel-Taste“) und SHIFT-Taste (Taste mit Pfeil nach oben) gedrückt halten, dann die R-Taste drücken, oder
  • SHIFT-Taste gedrückt halten und mit der Maus auf den Neu laden-Button klicken

Microsoft Internet Explorer / Microsoft Edge

  • STRG-Taste gedrückt halten und F5-Taste drücken, oder
  • STRG-Taste gedrückt halten und mit der Maus auf den Neu laden-Button klicken

Fazit

Ich hoffe, dass ich euch mit diesem F/X-Quick-Tipp weiterhelfen konnte. Über Kommentare und Feedbacks zum Artikel und Teilen auf Facebook & Co. würde ich mich sehr freuen!

 

TAG-Begriffe →  

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.