F/X-Quick-Tipp: Favicon in Browser-Tab aktualisieren

Beitragsbild für Favicon-Artikel "F/X-Quick-Tipp: Favicon in Browser-Tab aktualisieren"
Beitragsbild für Favicon-Artikel "F/X-Quick-Tipp: Favicon in Browser-Tab aktualisieren"

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!

 

Franz X. Kohl
Über Franz X. Kohl 39 Artikel
Inhaber von F/X Web Consulting und Betreiber des Unternehmens-Blogs www.muenchen-webdesign.de

6 Kommentare

  1. Coole Idee.

    klappt bei mir aber leider nicht mit Firefox 58.0 und der Lesezeichen-Symbolleiste. :-(
    Das falsche Icon ist wie „eingebrannt“ :(

    • Hallo S.,

      zum Zeitpunkt der Artikel-Erstellung war Firefox in der Version 56.x bei uns im Einsatz, und da haben alle unsere Tests mit FF funktioniert. Ich habe die Prozedur noch nicht mit 58.x getestet, habe auch selbst aktuell überall nur 57.x im Einsatz – einfach weil ich mir angewöhnt habe, keine Nuller-Versionen (also brandneue Major-Releases) zu installieren, da eben doch des Öfteren noch kleine Bugs enthalten sind…

      Wenn wir hier etwas testen bzw. helfen können sollen, brauchen wir natürlich auch mehr Informationen – Minimum wäre die Website-URL wo das Problem auftritt, sowie die Versionsangaben zum Betriebssystem.

    • Hallo Klaus,

      sorry, dass ich erst jetzt zum Antworten komme, hatte viel um die Ohren.

      Ich bin mittlerweile ebenfalls auf Firefox 58.0.2 (64-bit) auf Windows 10 Version 1709 (OS Build 16299.248), und habe mir das auf allen drei von Dir genannten Seiten angesehen, mit folgendem Ergebnis:

      der-postillon.com
      Hier ist das Favicon auf die übliche Art – also ganz normal – eingebunden:
      <link href='http://www.der-postillon.com/favicon.ico' rel='icon' type='image/x-icon'/>
      Bei mir wird das Favicon ganz normal angezeigt – ich wüßte nicht, woran es hier bei Dir liegen sollte.

      tvspielfilm.de
      Hier ist das Favicon ebenfalls ganz normal eingebunden:
      <link rel="shortcut icon" type="image/x-icon" title="" href="http://www.tvspielfilm.de/favicon.ico">
      Auch hier wird bei mir das Favicon ganz normal angezeigt – ich wüßte nicht, warum das bei Dir nicht funktioniert.

      transfermarkt.de
      Hier ist das Favicon etwas aufwändiger eingebunden, da hier auch spezielle Favicons für Android- und Apple-Devices vorgesehen sind:
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png">
      <link rel="shortcut icon" sizes="192x192" href="/android-chrome-192x192.png">
      <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152.png">

      Hier wird bei mir auf dem Windows-PC standardmäßig das zweite Icon – also favicon-16×16.png – angezeigt. Weshalb dieses und nicht die favicon.ico müsste ich erst recherchieren… dazu fehlt mir derzeit allerdings die Zeit :-/

      Hast Du testhalber schon mal den Firefox im abgesicherten Modus (Safe Mode) gestartet?
      Hier ist beschrieben wie das geht: https://support.mozilla.org/de/kb/firefox-probleme-beheben-abgesicherter-modus

      Lass mich bitte wissen falls der Safe Mode helfen sollte, damit ich meinen Artikel entsprechend aktualisieren kann.

      Viel Glück und viele Grüße
      Franz X. Kohl

    • Hallo Peter,

      das klingt für mich danach, dass der Firefox ein Problem mit seinem eigenen Cache hat. Schon mal versucht das Lesezeichen zu löschen, alle Caches im Firefox löschen, Firefox beenden, neu starten, und das Lesezeichen neu erstellen?

      Falls das nicht reichen sollte: eine Google-Suche nach „firefox bookmarks wrong icon“ (ohne die Anführungszeichen) liefert eine Menge Ergebnisse… das scheint also vielen anderen auch schon passiert zu sein. Da gegebenenfalls mal durchstöbern, vielleicht ist noch ein guter Tipp dabei.

      Ansonsten bliebe nur noch den Firefox auf eine neuere Version zu aktualisieren – zumindest hat das bei manchen geholfen, wie ich diversen Artikeln entnehmen konnte.

      Viel Glück dabei und viele Grüße
      Franz X. Kohl

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*