发表新帖
发表新帖

Favicon NOT working on Edge

前端 未结
关注
13 1534
傲寒
傲寒 2020-12-16 09:19

I have a problem with this favicon I generated for a local server php project. It works fine on most browsers (Google Chrome, Mozilla Firefox and Opera) but on Microsoft Edg

相关标签:
13条回答
  • 轮回少年
    2020-12-16 09:29

    For me the problem was that on localhost it never worked in Edge. No matter what I did. It was always fine in Chrome and Firefox. The solution was that it only worked in Edge after I deployed to the webserver.

    0 讨论(0)
  • 囚心锁ツ
    2020-12-16 09:29

    There are 2 problems in Edge. Both are avoided when deploying to a web server (that's why it started working in another answers after deploying to a web server). However, you can make it work on localhost, too.

    1. Incomplete headers returned from server

    It looks like for Edge the web server has to return Cache-Control header for the favicon.

    E.g. this value works:

    Cache-Control: public, max-age=2592000

    The common web servers probably send that header automatically. However, if you have some custom solution, you have to implement it manually. E.g. in WCF:

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

    2. Edge cannot access localhost because of some Windows security settings

    By default, Windows store apps cannot use loopback interface. This seems to affect favicon loading, which is loaded using another means that the web page alone (so, even if the web page works, favicon does not work).

    To enable loopback for Edge, run this in PowerShell as Administrator:

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

    Edge restart is not needed - after page refresh (F5), the favicon should be loaded.

    To disable loopback again:

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

    The favicon will be cached in Edge, so it will be still visible.

    Other info

    If you use HTTPS, it looks like the certificate has to be valid (trusted) for the favicon to show.

    0 讨论(0)
  • 名媛妹妹
    2020-12-16 09:29

    You should change the name of your favicon.ico file. Like "myFavicon.ico".

    You should also add ? at the end of your link, like so:

    <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" />

    Also, did you refresh the cache before testing? If not, reset the cache, or you will not see your changes.

    Finally, it could also be your icon. Try using a favicon generator.

    0 讨论(0)
  • 萌比男神i
    2020-12-16 09:32

    Adding Cache-Control:public, max-age=14400 to the http header worked for me. Checked it with IE, Edge, and Chrome on Windows 10 using an ESP8266-12E running Arduino as a web server on a local network. (Haven't tried any Apple or Android-specific support yet). FWIW - Here's part of the html from the root page of my server:

    <!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>

    and here's a ESP8266/Arduino code snippet for creating the http header in the response and sending the icon data previously stored as a file using SPIFFS.

    ...
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();
...
    0 讨论(0)
  • 小蘑菇
    2020-12-16 09:33

    Maybe it's a echo encapsulation issue. I mean that href would have "request->baseUrl;" as a value

    try 

      <?php
      echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
  ?>
    0 讨论(0)
  • 滥情空心
    2020-12-16 09:33

    I had the same problem and how I have solved as below.

    • Icon name must be favicon. I have used .ico. (Different name was not working for me)

    • Favicon must be at the root folder where your HTML located. (Below is my folder structure)

      -- src
   -- app
      -- images
      -- css
      -- favicon.ico
      -- index.html

    • include icon in HTML

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

    I have tested and fixed my issue in below browsers

    • Chrome (Version 76.0.3809.100)
    • Firefox (Version 68.0.1)
    • Safari (Version 11.1)
    • Internet Explorer (Version 11 &10)
    • Edge (Version 42.17134.1.0)
    0 讨论(0)
 看不清?
提交回复
热议问题