Fatal编程技术网
  • html/
  • Html 法维康不在边缘工作

Html 法维康不在边缘工作

html

Html 法维康不在边缘工作,html,icons,microsoft-edge,favicon,Html,Icons,Microsoft Edge,Favicon,我为本地服务器php项目生成的favicon有问题。它在大多数浏览器（谷歌Chrome、Mozilla Firefox和Opera）上都能正常工作，但在Microsoft Edge上却不能正常工作（它显示了默认选项卡favicon） 我已经尝试过很多解决这个问题的方法，比如清除缓存，使用图像格式（.png）而不是图标（.ico），但似乎没有任何效果 以下是我在HTML标题中包含的代码行： <link rel="icon" href="<?php echo Yii::$app->

我为本地服务器php项目生成的favicon有问题。它在大多数浏览器（谷歌Chrome、Mozilla Firefox和Opera）上都能正常工作，但在Microsoft Edge上却不能正常工作（它显示了默认选项卡favicon）

我已经尝试过很多解决这个问题的方法，比如清除缓存，使用图像格式（.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" />

首先，尝试常用的修复方法：清除缓存、历史记录和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的问题。请访问以下网站：

可能是因为你的favicon太大了。根据此链接中线程中的答案，favicon是否应为16 x 16 px：



在我的网站（loekbergman.nl）上，它是否正常工作，我确实有一个16x16px的图标。
也许这是一个echo封装问题。
我的意思是href将“request->baseUrl；”作为一个值

试一试




对我来说，问题是在本地主机上，它在Edge中从未工作过。不管我做了什么。在Chrome和Firefox中总是很好。解决方案是，只有在我部署到Web服务器之后，它才能在Edge中工作
 尝试创建PNG格式的512x512。为我工作。
您应该更改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" />



为我添加了id=“favicon”

整条线看起来像



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


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



Edge中有两个问题。在部署到web服务器时避免了这两种情况（这就是为什么它在部署到web服务器后开始在其他服务器中工作）。但是，您也可以使其在本地主机上工作

1。从服务器返回的标题不完整

对于Edge，web服务器似乎必须返回favicon的缓存控制头

例如，该值适用于：


Cache-Control: public, max-age=2592000


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


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


2。由于某些Windows安全设置，边缘无法访问本地主机

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

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


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


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

要再次禁用环回，请执行以下操作：


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


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

其他信息


如果使用HTTPS，则证书必须有效（受信任）才能显示favicon。
将缓存控制：public，max age=14400添加到http头中对我有效。使用运行Arduino的ESP8266-12E作为本地网络上的web服务器，在Windows 10上使用IE、Edge和Chrome进行检查。（尚未尝试任何苹果或安卓特定支持）。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>



边缘解决方案



TL；博士

从外部托管favicon图像



如果您还没有favicon，您可以生成它们或

我已将我的32x32 png上传到
只有在favicon/png图像托管的情况下，它才能在本地测试期间工作！外部，比如
imgur.com

在页面的
标题中，我将favicon设置为：


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


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

输入您的url，如下所示：

www.your-app.com
或

localhost/yourApp
或

localhost:xxxx/yourApp

两个都试试

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

Edge需要一些时间才能抓住它

这在IIS中有效。在那之后，我用IIS Express测试了它，它也在那里工作。没关系。重要的是，您必须在外部主持favicon


例如，无论我访问哪个站点，IE11都不会显示favicons。
所以，忘掉IE11；-）
 遵循以下步骤


  • 图像名称应为favicon.ico，格式应为ico
    • 

  • 将ico放在“wwwroot”文件夹中
    • 

  • index.html中的ico引用应为
    
“”
    • 

  • 从本地运行时，Edge不显示favicon。在Web服务器中部署并重试
    • 

    这对我很有效
    我遇到了同样的问题，我是如何解决的，如下所示
    

      

    • 图标名称必须是
      favicon
      。我使用了
      .ico
      。（不同的名字不适合我）
      • 

    • Favicon必须位于
      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）
      • 

    • 边缘（版本42.17134.1.0）
      • 

    

    您是否检查了边缘上带有“查看源代码”的实际HTML代码？尽管两次声明favicon.ico听起来“更安全”，梅

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

    

    127.0.0.1   www.your-app.com

    

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

    

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