Favicon funktioniert NICHT auf Edge

Ich habe ein Problem mit diesem Favicon, das ich für ein lokales Server-PHP-Projekt generiert habe. Es funktioniert gut auf den meisten Browsern (Google Chrome, Mozilla Firefox und Opera), aber auf Microsoft Edge funktioniert es nicht (es zeigt das Standard-Tab-Favicon).

Ich habe viele Lösungen für dieses Problem ausprobiert, z. B. das Leeren des Caches und das Verwenden des Bildformats (.png) anstelle des Symbols (.ico), aber nichts schien zu funktionieren.

Hier sind die Codezeilen, die ich in den HTML-Kopf eingefügt habe:

<link rel="icon" href="https://stackoverflow.com/questions/33081965/<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://stackoverflow.com/questions/33081965/<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />

Hatte jemand das gleiche Problem und hat es gelöst?

Für mich war das Problem, dass es auf localhost in Edge nie funktioniert hat. Egal was ich tat. In Chrome und Firefox war es immer in Ordnung. Die Lösung war, dass es in Edge nur funktionierte, nachdem ich es auf dem Webserver bereitgestellt hatte.

Es gibt 2 Probleme in Edge. Beides wird bei der Bereitstellung auf einem Webserver vermieden (deshalb hat es nach der Bereitstellung auf einem Webserver in anderen Antworten funktioniert). Sie können es jedoch auch auf localhost zum Laufen bringen.

1. Vom Server zurückgegebene unvollständige Header

Es sieht so aus, als ob der Webserver für Edge den Cache-Control-Header für das Favicon zurückgeben muss.

Dieser Wert funktioniert zB:

Cache-Control: public, max-age=2592000

Die gängigen Webserver senden diesen Header wahrscheinlich automatisch. Wenn Sie jedoch über eine benutzerdefinierte Lösung verfügen, müssen Sie diese manuell implementieren. Bsp in WCF:

WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");

2. Edge kann aufgrund einiger Windows-Sicherheitseinstellungen nicht auf localhost zugreifen

Standardmäßig können Windows Store-Apps die Loopback-Schnittstelle nicht verwenden. Dies scheint das Laden von Favicons zu beeinflussen, das mit einem anderen Mittel als der Webseite allein geladen wird (selbst wenn die Webseite funktioniert, funktioniert Favicon also nicht).

Um Loopback für Edge zu aktivieren, führen Sie dies in PowerShell als Administrator aus:

CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Ein Edge-Neustart ist nicht erforderlich – nach der Seitenaktualisierung (F5) sollte das Favicon geladen werden.

Loopback wieder deaktivieren:

CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Das Favicon wird in Edge zwischengespeichert, sodass es weiterhin sichtbar ist.

Andere Information

Wenn Sie HTTPS verwenden, muss das Zertifikat anscheinend gültig (vertrauenswürdig) sein, damit das Favicon angezeigt wird.

Ich hatte das gleiche Problem mit Edge. Ich habe viele Problemumgehungen ausprobiert, aber nur das Verschieben des Symbols vom lokalen zum WWW-Server war erfolgreich. Wenn Ihr Server lokal ist (auf localhost), versuchen Sie, die Symboldatei auf einen globalen Server zu verschieben.

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

Sie sollten den Namen Ihrer favicon.ico-Datei ändern. Wie “myFavicon.ico”.

Sie sollten auch hinzufügen ? am Ende deines Links, so:

<link rel="icon" href="https://stackoverflow.com/questions/33081965/<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
<link rel="shortcut icon" href="https://stackoverflow.com/questions/33081965/<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />

Hast du den Cache vor dem Test auch aktualisiert? Wenn nicht, setzen Sie den Cache zurück, oder Sie werden Ihre Änderungen nicht sehen.

Schließlich könnte es auch Ihr Symbol sein. Versuchen Sie es mit a Favicon-Generator.

für mich habe ich id=”favicon” hinzugefügt

die ganze Zeile sieht aus wie

    <link  id="favicon" href="https://stackoverflow.com/questions/33081965/~/favicon.png" rel="shortcut icon" type="image/x-icon"  />

Lösung für EDGE

TL;DR;

Hosten Sie Ihre Favicon-Bilder extern.

Wenn Sie noch kein Favicon haben, können Sie eines erstellen hier oder hier.

Ich habe mein 32×32-PNG hochgeladen imgur.com
Es funktioniert während lokaler Tests nur wenn Das Favicon/PNG-Bild wird gehostet !extern!wie imgur.com.

In dem head der Seite habe ich das Favicon so gesetzt:

 <link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">

Es gibt keine Namenskonvention, Sie können das Favicon benennen, was Sie wollen xyz.png aber ich denke, es muss 32×32 sein!

Ich habe auch eine eingerichtet hosts Eintrag, der auf meine Web-App in IIS zeigt, wie:

127.0.0.1   www.your-app.com

Schritte: Schließen Sie den Browser, warten Sie 30 Sekunden und öffnen Sie ihn erneut.

Geben Sie Ihre URL entweder wie folgt ein:
www.your-app.com oder
localhost/yourApp oder
localhost:xxxx/yourApp.

Probieren Sie beides aus!

Stellen Sie sicher, dass Sie den Cache löschen. Drücken Sie F5. Wahrscheinlich müssen Sie diese Schritte zwei- bis dreimal wiederholen.

Es wird einige Zeit dauern, bis Edge es versteht.

Dies funktioniert im IIS. Danach habe ich es mit IIS Express getestet und es funktioniert auch dort. Es spielt keine Rolle. Was zählt, ist, Sie müssen das Favicon extern hosten.

Beispielsweise zeigt IE11 überhaupt keine Favicons an, egal welche Seite ich besuche. Also vergiss IE11 😉

Es kann sein, dass Ihr Favicon zu groß ist. Laut der Antwort im Thread in diesem Link sollte ein Favicon 16 x 16 px groß sein:
https://forum.yola.com/yola/topics/edge-not-displaying-favicon

Auf meiner Website (loekbergman.nl) funktioniert es und ich habe tatsächlich ein 16x16px-Symbol.