Html Favicon 在 Edge 上不起作用

Favicon NOT working on Edge

提问by Ragheb AlKilany

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 Edge it doesn't work (It shows the default tab favicon).

我为本地服务器 php 项目生成的这个图标有问题。它在大多数浏览器（Google Chrome、Mozilla Firefox 和 Opera）上都可以正常工作，但在 Microsoft Edge 上它不起作用（它显示默认选项卡图标）。

I've tried many solutions to this problem like clearing the cache, using image format (.png) instead of icon (.ico), but nothing seemed to work.

我已经尝试了许多解决此问题的方法，例如清除缓存、使用图像格式 (.png) 而不是图标 (.ico)，但似乎没有任何效果。

Here are the lines of code that I've included in the HTML head:

以下是我在 HTML 头中包含的代码行：

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

Anyone had the same issue and solved it?

有人遇到过同样的问题并解决了吗？

回答by Yster

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.

对我来说，问题是在 localhost 上它从未在 Edge 中工作过。不管我做了什么。在 Chrome 和 Firefox 中总是很好。解决方案是它只能在我部署到网络服务器后在 Edge 中工作。

回答by Milan Laslop

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.

Edge有两个问题。部署到 Web 服务器时都避免了这两种情况（这就是为什么它在部署到 Web 服务器后开始在另一个答案中工作）。但是，您也可以使其在 localhost 上运行。

1. Incomplete headers returned from server

1.服务器返回的headers不完整

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

看起来对于 Edge，Web 服务器必须返回收藏夹图标的 Cache-Control 标头。

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:

常见的 Web 服务器可能会自动发送该标头。但是，如果您有一些自定义解决方案，则必须手动实施。例如在 WCF 中：

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

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

2. 由于某些 Windows 安全设置，Edge 无法访问 localhost

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).

默认情况下，Windows 商店应用程序不能使用环回接口。这似乎会影响网站图标加载，这是使用另一种方式加载的网页本身（因此，即使网页有效，网站图标也不起作用）。

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

要为 Edge 启用环回，请在 PowerShell 中以管理员身份运行：

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

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

不需要重新启动边缘 - 在页面刷新 (F5) 后，应该加载图标。

To disable loopback again:

再次禁用环回：

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

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

图标将缓存在 Edge 中，因此它仍然可见。

Other info

其他信息

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

如果您使用 HTTPS，则该证书似乎必须有效（受信任）才能显示图标。

回答by Valentin Safonnikov

I had the same issue with Edge. I have tried a lot of workarounds, but only moving the icon from local to www server was successful. If your server is local (at localhost), try to move the icon file to a global server.

我在 Edge 上遇到了同样的问题。我尝试了很多解决方法，但只有将图标从本地移动到 www 服务器才成功。如果您的服务器是本地服务器（在 localhost），请尝试将图标文件移动到全局服务器。

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

回答by Dotnetsqlcoder

for me i added id="favicon"

对我来说，我添加了 id="favicon"

the whole line looks like

整条线看起来像

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

回答by David Gourde

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

您应该更改 favicon.ico 文件的名称。像“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.

最后，它也可能是您的图标。尝试使用网站图标生成器。

回答by Loek Bergman

It might be that your favicon is too big. According to the answer in the thread in this link should a favicon be 16 x 16 px: https://forum.yola.com/yola/topics/edge-not-displaying-favicon

可能是您的图标太大了。根据此链接中线程中的答案，图标应该是 16 x 16 像素：https: //forum.yola.com/yola/topics/edge-not-displaying-favicon

In my website (loekbergman.nl) is it working and I have a 16x16px icon indeed.

在我的网站 (loekbergman.nl) 中，它是否正常工作，并且我确实有一个 16x16px 的图标。

回答by Legends

Solution for EDGE

边缘解决方案

---

---

TL;DR;TL; 博士;

Host your favicon images externally.

在外部托管您的网站图标图像。

---

---

If you don't have a favicon already, you can generate them hereor here.

如果您还没有收藏夹图标，您可以在此处或此处生成它们。

I have uploaded my 32x32 png to imgur.comIt works during local testing onlyifthe favicon/png image is hosted !externally!, like imgur.com.

我已经上传了我的32x32的PNG到imgur.com它本地测试期间的工作只有当该图标/ PNG图片托管！外！，喜欢imgur.com。

In the headof the page I set the favicon like this:

在head页面的 中，我像这样设置了图标：

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

There is no naming convention, you can name the favicon whatever you like xyz.pngbut I guess it has to be 32x32!

没有命名约定，您可以随意命名收藏夹图标，xyz.png但我想它必须是 32x32！

I have also setup a hostsentry pointing to my web app in IIS like:

我还在hostsIIS 中设置了一个指向我的 Web 应用程序的条目，例如：

127.0.0.1   www.your-app.com

Steps:Close the browser, wait 30 seconds and reopen it.

步骤：关闭浏览器，等待 30 秒后重新打开。

Enter your url either like: www.your-app.comor localhost/yourAppor localhost:xxxx/yourApp.

无论是输入您的网址，如： www.your-app.com或 localhost/yourApp或 localhost:xxxx/yourApp。

Try both!

两个都试试！

Make sure you clear the cache. Hit F5. Probably you need to repeat this steps, two to three times.

确保清除缓存。按F5。可能您需要重复此步骤两到三次。

It will take some time for Edge to grasp it.

Edge需要一些时间来掌握它。

This works in IIS. After that I have tested it wit IIS Express and it works there too. It doesn't matter. What matters is, you have to host the favicon externally.

这在 IIS 中有效。在那之后，我用 IIS Express 对其进行了测试，它也可以在那里工作。没关系。重要的是，您必须在外部托管网站图标。

For example, IE11 does not show favicons at all, no matter which site I visit. So, forget about IE11 ;-)

例如，IE11 根本不显示网站图标，无论我访问哪个站点。所以，忘记 IE11 ;-)

回答by Tom S

Adding Cache-Control:public, max-age=14400to 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:

将Cache-Control:public, max-age=14400 添加到 http 标头对我有用。使用运行 Arduino 作为本地网络上的 Web 服务器的 ESP8266-12E 在 Windows 10 上使用 IE、Edge 和 Chrome 进行检查。（尚未尝试任何 Apple 或 Android 特定的支持）。FWIW - 这是我服务器根页面中 html 的一部分：

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

这是一个 ESP8266/Arduino 代码片段，用于在响应中创建 http 标头并发送之前使用 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();
...

回答by Yubin Lee

First, try the usual fixing method: clear cache, history and cookies.

首先，尝试通常的修复方法：清除缓存、历史记录和 cookie。

If that doesn't work, try:

如果这不起作用，请尝试：

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

Make sure favicon.ico is in the samefolder as your html file.

确保 favicon.ico与您的 html 文件位于同一文件夹中。

If it still doesn't work, it might be an issue with MS Edge. Check the website below: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

如果它仍然不起作用，则可能是 MS Edge 的问题。检查以下网站：https: //www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

回答by Valérian Polizzi

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

也许这是一个回声封装问题。我的意思是 href 会有“request->baseUrl;” 作为价值

try

尝试

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