webentwicklung-frage-antwort-db.com.de

Favicon arbeitet NICHT an Edge

Ich habe ein Problem mit diesem Favicon, das ich für ein lokales Server-PHP-Projekt generiert habe. Es funktioniert in den meisten Browsern (Google Chrome, Mozilla Firefox und Opera), aber in 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 mithilfe des Bildformats (.png) anstelle des Symbols (.ico), aber es schien nichts zu funktionieren.

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

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

Hatte jemand das gleiche Problem und löste es?

42
Ragheb AlKilany

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

54
Yster

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

1. Unvollständige Header vom Server zurückgegeben

Bei Edge muss der Webserver den Cache-Control-Header für das Favicon zurückgeben.

Z.B. Dieser Wert funktioniert:

Cache-Control: public, max-age=2592000

Die gängigen Webserver senden diesen Header wahrscheinlich automatisch. Wenn Sie jedoch eine benutzerdefinierte Lösung haben, müssen Sie diese manuell implementieren. Z.B. 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 keine Loopback-Schnittstelle verwenden. Dies scheint Auswirkungen auf das Laden von Favicons zu haben, was bedeutet, dass die Webseite alleine geladen wird (selbst wenn die Webseite funktioniert, funktioniert Favicons nicht).

Führen Sie Folgendes in PowerShell als Administrator aus, um Loopback für Edge zu aktivieren:

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

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

So deaktivieren Sie Loopback erneut:

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

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

Sonstige Infos

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

13
Milan Laslop

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

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

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

die ganze linie sieht aus wie

    <link  id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon"  />
4
Dotnetsqlcoder

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

Sie sollten auch ? Am Ende Ihres Links hinzufügen, wie folgt:

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

Haben Sie den Cache vor dem Testen aktualisiert? Wenn nicht, setzen Sie den Cache zurück, sonst werden Ihre Änderungen nicht angezeigt.

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

3
David G

Möglicherweise ist Ihr Favicon zu groß. Laut der Antwort im Thread in diesem Link sollte ein Favicon 16 x 16 px 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.

2
Loek Bergman

Versuchen Sie zunächst die übliche Korrekturmethode: Cache, Verlauf und Cookies löschen.

Wenn das nicht funktioniert, versuchen Sie:

<html>    
<head>
<title> Your Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body> Your content </body>
</html>

Stellen Sie sicher, dass sich favicon.ico im Ordner same als Ihre HTML-Datei befindet.

Wenn dies immer noch nicht funktioniert, liegt möglicherweise ein Problem mit MS Edge vor. Überprüfen Sie die folgende Website: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

1
Yubin Lee

Das Hinzufügen von Cache-Control: public, max-age = 144 zum http-Header hat bei mir funktioniert. Überprüfte es mit IE, Edge und Chrome unter Windows 10 mit einem ESP8266-12E, auf dem Arduino als Webserver in einem lokalen Netzwerk ausgeführt wird. (Habe noch keinen versucht Apple oder Android-spezifische Unterstützung noch). FWIW - Hier ist ein Teil des HTML von der Root-Seite meines Servers:

<!DOCTYPE html>
<html>
<head>
<title>Favicon Test</title>
<link rel="shortcut icon" href="/faviconS.ico" type="image/x-icon">
<link id="favicon" rel="icon" href="/favicon.ico" type="image/x-icon">
<link id="favicon-16x16" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link id="favicon-32x32" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link id="favicon-96x96" rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
</head>
<body>
...
</body>
</html>

und hier ist ein ESP8266/Arduino-Code-Snippet zum Erstellen des http-Headers in der Antwort und zum Senden der zuvor mit SPIFFS als Datei gespeicherten Symboldaten.

...
f = SPIFFS.open("/favicon.ico", "r");
if (!f) {
  Serial.println("file open failed");
} else {
  Serial.println("favicon.ico open succeeded...");
  client.println("HTTP/1.1 200 OK");
  client.print("Content-Length:");
  client.println(String(f.size()));
  client.println("Content-Type:image/x-icon");
  client.println("Cache-Control: public, max-age=14400");
  client.println();  // blank line indicates end of header
  while (f.available()) {  // send the binary for the icon
    byte b = f.read();
    client.write(b);
  }
f.close();
...
1
Tom S

Ich hatte das gleiche Problem und wie ich es gelöst habe wie unten.

  • Der Symbolname muss favicon sein. Ich habe benutzt .ico. (Anderer Name hat bei mir nicht funktioniert)
  • Favicon muss sich im Stammverzeichnis befinden, in dem sich Ihr HTML befindet. (Unten ist meine Ordnerstruktur)

    -- src
       -- app
          -- images
          -- css
          -- favicon.ico
          -- index.html
    
  • icon in HTML einbinden

    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    

Ich habe mein Problem in den folgenden Browsern getestet und behoben

  • Chrome (Version 76.0.3809.100)
  • Firefox (Version 68.0.1)
  • Safari (Version 11.1)
  • Internet Explorer (Version 11 und 10)
  • Edge (Version 42.17134.1.0)
0
Hardik Shah

Vielleicht ist es ein Echo Kapselung Problem. Ich meine, dass href "request-> baseUrl;" als Wert

versuchen

  <?php
      echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
  ?>
0

Folge diesen Schritten

  1. Der Bildname sollte favicon.ico und das Format ico sein
  2. Legen Sie das ICO in den Ordner "wwwroot"
  3. ico referenz in index.html sollte sein

    "<link rel =" icon "type =" image/x-icon "href ="/favicon.ico ">"

  4. Edge zeigt kein Favicon an, wenn es von lokal ausgeführt wird. Auf dem Webserver bereitstellen und versuchen

Das hat bei mir funktioniert

0