Question

我为本地服务器php项目生成的这个favicon有问题。它适用于大多数浏览器（谷歌浏览器，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" />

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

Answer 1

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

Answer 2

Edge有2个问题。部署到Web服务器时可以避免这两种情况（这就是它在部署到Web服务器后开始处理另一个答案的原因）。但是，您也可以在localhost上使用它。

<强> 1。从服务器返回的标头不完整

对于Edge来说，Web服务器必须返回favicon的Cache-Control标头。

E.g。这个值有效：

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加载，它使用另一种方式加载网页（因此，即使网页有效，图标也不起作用）。

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

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

不需要边缘重启 - 页面刷新（F5）后，应加载favicon。

再次禁用环回：

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

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

其他信息

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

Answer 3

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

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

Answer 4

对我来说，我添加了id =“favicon”

整条线看起来像

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

Answer 5

您应该更改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。

Answer 6

可能你的favicon太大了。根据此链接中的帖子中的答案，favicon应为16 x 16 px： https://forum.yola.com/yola/topics/edge-not-displaying-favicon

在我的网站（loekbergman.nl）中它正常工作，我确实有一个16x16px的图标。

Answer 7

EDGE解决方案

<小时/> 的 TL; DR;

在外部托管您的favicon图像。

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

我已将32x32 png上传到imgur.com 它适用于本地测试仅如果 favicon / png图像托管！external！，例如imgur.com。

在页面的head中，我按照以下方式设置了favicon：

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

没有命名约定，您可以将喜欢的名称命名为xyz.png，但我想它必须是32x32！

我还在IIS中设置了指向我的网络应用的hosts条目，如：

127.0.0.1 www.your-app.com

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

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

试试两个！

确保清除缓存。点击F5。可能你需要重复这个步骤两到三次。

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

这适用于IIS。之后我用IIS Express测试了它，它也在那里工作。没关系。重要的是，您必须在外部托管favicon 。

例如，无论我访问哪个站点，IE11都不显示favicon。所以，忘掉IE11; - ）

Answer 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

Answer 9

将 Cache-Control：public，max-age = 14400 添加到为我工作的http标头中。使用运行Arduino的ESP8266-12E作为本地网络上的Web服务器，在Windows 10上使用IE，Edge和Chrome进行检查。（Haven尚未尝试任何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代码片段，用于在响应中创建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();
...

Answer 10

可能是回声封装问题。我的意思是href会有＆＃34; request-＆gt; baseUrl;＆＃34;作为一个值

尝试

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

Answer 11

遵循这些步骤

图片名称应为favicon.ico，格式应为ico
将ico放在“ wwwroot”文件夹中
ico参考应为

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

这对我有用

Answer 12

我遇到了同样的问题，以及如何解决如下问题。

图标名称必须为departLane=0。我使用了favicon。（不同的名字对我不起作用）
收藏夹必须位于.ico所在的根文件夹中。（下面是我的文件夹结构）
```
HTML
```

HTML中的包含图标

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

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


Chrome（版本76.0.3809.100）

Firefox（版本68.0.1）

Safari（版本11.1）

Internet Explorer（版本11和10）

Edge（版本42.17134.1.0）

Answer 13

尝试以PNG格式创建512x512。为我工作。

Favicon不在Edge上工作

13 个答案: