Favicon 不在 Edge 上工作答案

【问题标题】：Favicon NOT working on EdgeFavicon 不在 Edge 上工作
【发布时间】：2021-08-17 01:57:55
【问题描述】：

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

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

以下是我在 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" />

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

【问题讨论】：

您是否在 Edge 上使用“查看源代码”检查了实际的 HTML 代码？虽然两次声明favicon.ico 听起来“更安全”，但也许这就是问题的原因。
我检查了它，但我没有看到任何奇怪的东西。而且我试过只使用快捷方式图标，它也不起作用。
你的图标长宽比是多少？
问题还是解决了吗？尝试在线 fevicon 生成器和 gt 带有 .ico 扩展名的图像并将其用于 favicon

标签： html icons microsoft-edge favicon

【解决方案1】：

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

【讨论】：

注意：尽量把图片的路径设为绝对路径而不是相对路径，这对我有用！
如果主机最终解析为环回 IP 地址，则设置绝对路径不起作用，例如127.0.0.1

【解决方案2】：

Edge 有 2 个问题。部署到 Web 服务器时避免这两种情况（这就是为什么它在部署到 Web 服务器后开始在另一个答案中工作的原因）。不过，你也可以让它在 localhost 上运行。

1.从服务器返回不完整的标头

看起来对于 Edge，Web 服务器必须为网站图标返回 Cache-Control 标头。

例如这个值有效：

Cache-Control: public, max-age=2592000

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

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

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

默认情况下，Windows 商店应用程序不能使用环回接口。这似乎会影响 favicon 的加载，它使用另一种方式加载意味着网页单独（因此，即使网页可以正常工作，favicon 也无法正常工作）。

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

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

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

再次禁用环回：

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

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

其他信息

如果您使用 HTTPS，看起来证书必须有效（受信任）才能显示网站图标。

【讨论】：

【解决方案3】：

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

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

【讨论】：

基本上，我解决了像你这样的问题：只需添加一个绝对的全局http地址。然后它工作。相对路径不起作用。
是的，Edge 不喜欢相对路径。它希望网站图标位于服务器根目录上。
相对路径、服务器根等可能是一个红鲱鱼。最终，如果图标主机解析为环回 IP 地址（例如 127.0.0.1），Edge/IE11 将不会加载它。

【解决方案4】：

您应该更改 favicon.ico 文件的名称。比如“myFavicon.ico”。

您还应该在链接末尾添加?，如下所示：

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

另外，您是否在测试前刷新了缓存？如果没有，请重置缓存，否则您将看不到您的更改。

最后，它也可能是您的图标。尝试使用favicon generator。

【讨论】：

更改网站图标的文件名对我有用。很奇怪。

【解决方案5】：

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

整行看起来像

    &lt;link  id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon"  /&gt;

【讨论】：

恐怕这似乎也不起作用。似乎是在我从外部源加载（并缓存）图标之后，然后将链接标签更改为包含 ID。当我尝试在另一个运行 Edge 的系统上进行相同的修复时，它根本不起作用。

【解决方案6】：

EDGE 解决方案

TL;DR;

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

如果您还没有网站图标，您可以生成它们here 或here。

我已将我的 32x32 png 上传到 imgur.com 它在本地测试期间工作仅如果 favicon/png 图像托管在！外部！，如imgur.com。

在页面的head 中，我将网站图标设置为：

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

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

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

127.0.0.1   www.your-app.com

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

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

两个都试试！

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

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

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

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

【讨论】：

我将我的网站图标上传到了我的网络服务器，现在一切都正常显示了。我还创建了一个 manifest.json 文件，将 json 文件中包含的所有图标上传到我的网络服务器，更新了所有 url，现在当我从 Edge 固定网站时，它会在 Tile 中显示图标。我想说这是将所有图标和网站图标放到外部网络服务器上的最佳解决方案。谢谢！

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

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

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

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

【讨论】：

【解决方案9】：

将 Cache-Control:public, max-age=14400 添加到 http 标头对我有用。使用运行 Arduino 的 ESP8266-12E 作为本地网络上的 Web 服务器，在 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>

这是一个 ESP8266/Arduino 代码 sn-p，用于在响应中创建 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();
...

【讨论】：

【解决方案10】：

按照这些步骤进行

图片名称应为 favicon.ico，格式应为 ico
将 ico 放在“wwwroot”文件夹中
index.html 中的 ico 引用应该是

""
Edge 在本地运行时不显示网站图标。在网络服务器中部署并尝试

这对我有用

【讨论】：

这篇文章为我修好了！

【解决方案11】：

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

试试

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

【讨论】：

感谢您的参与。尝试了你们写的所有东西，但它并没有解决我的问题。我需要一个更可靠的来源，一个更全面的答案。

【解决方案12】：

我遇到了同样的问题，我的解决方法如下。

图标名称必须为favicon。我用过.ico。（不同的名字对我不起作用）
Favicon 必须位于您的HTML 所在的根文件夹中。（以下是我的文件夹结构）
```
-- src
   -- app
      -- images
      -- css
      -- favicon.ico
      -- index.html
```

在 HTML 中包含图标

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

我已在以下浏览器中测试并修复了我的问题

Chrome（版本 76.0.3809.100）

Firefox（版本 68.0.1）

Safari（11.1 版）

Internet Explorer（版本 11 和 10）

Edge（版本 42.17134.1.0）

【讨论】：

我认为你的解决方案是通过相对路径，我认为它不起作用。既然你说 favicon 应该在根文件夹（服务器根目录）href="favicon.ico 应该是 enouth，这是 Edge 可以接受的。

【解决方案13】：

这是一个相当老的问题，所以我想我会发布一个更新。它现在甚至可以在 Edge 中使用，只要“favicon.ico”位于根目录下，即/favicon.ico。

但是，如果 favicon 放置在根目录之外的其他位置，并且包含在相对路径中，问题似乎仍然存在。我在 Firefox 和 Opera 上看到了我的网站图标，但在 Edge 中没有。

但是，现在解决方案要简单得多。正如@Rui Lopes 的评论所暗示的那样，使用 绝对地址 对我有用，即使使用本地主机也是如此。我首先尝试了我的内部 IP（不是环回）并且它出现了。但它也适用于：

<link rel="icon" href="http://localhost:8000/icons/favicon.ico" type="image/x-icon">

顺便说一句，我现在只是使用python3 -m http.server。我有 Edge 版本 92.0.902.73（官方版本）（64 位）。

最简单的解决方案当然是将“favicon.ico”添加到 Web 服务器根目录。根据我的观察，甚至不需要<link> 代码。我在服务器日志上看到了以下请求，即使没有代码：

127.0.0.1 - - [16/Aug/2021 18:38:40] "GET /favicon.ico HTTP/1.1" 200 -

在 Edge、Firefox、Opera 和 Chrome 上进行了测试，它们似乎都默认执行此操作。不过，我还没有检查任何参考或文档，所以我仍然建议为其添加 HTML <link>。

【讨论】：

【解决方案14】：

尝试创建一个 512x512 的 PNG 格式。为我工作。

【讨论】：