问题
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).
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.
Here are the lines of code that I've included in the HTML head:
<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?
回答1:
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.
回答2:
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.
回答3:
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.
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
回答4:
for me i added id="favicon"
the whole line looks like
<link id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />回答5:
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.
回答6:
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
In my website (loekbergman.nl) is it working and I have a 16x16px icon indeed.
回答7:
Solution for EDGE
TL;DR;
Host your favicon images externally.
If you don't have a favicon already, you can generate them here or here.
I have uploaded my 32x32 png to imgur.com
It works during local testing only if the favicon/png image is hosted !externally!, like imgur.com.
In the head of the page I set the favicon like this:
<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.png but I guess it has to be 32x32!
I have also setup a hosts entry pointing to my web app in IIS like:
127.0.0.1 www.your-app.com
Steps: Close the browser, wait 30 seconds and reopen it.
Enter your url either like:
www.your-app.com or
localhost/yourApp or
localhost:xxxx/yourApp.
Try both!
Make sure you clear the cache. Hit F5. Probably you need to repeat this steps, two to three times.
It will take some time for Edge to grasp it.
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.
For example, IE11 does not show favicons at all, no matter which site I visit. So, forget about IE11 ;-)
回答8:
First, try the usual fixing method: clear cache, history and cookies.
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 same folder as your html file.
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
回答9:
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();
...
回答10:
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" />';
?>
回答11:
Follow these steps
- Image name should be favicon.ico and format should be ico
- Place the ico in "wwwroot" folder
ico reference in index.html should be
"< link rel="icon" type="image/x-icon" href="/favicon.ico" >"
Edge doesn't show favicon while running from local. Deploy in webserver and try
This worked for me
回答12:
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
HTMLlocated. (Below is my folder structure)-- src -- app -- images -- css -- favicon.ico -- index.htmlinclude 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)
回答13:
Try creating a 512x512 in PNG format. Worked for me.
来源：https://stackoverflow.com/questions/33081965/favicon-not-working-on-edge