I have a page with a SVG as my only favicon using the following line in the head element:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
This works correctly in Firefox, however Chrome (109.0.5414.120) doesn't give the page a favicon. Chrome's DevTools with cache disabled don't show any requests for favicon.svg. Nothing is logged to the console.
What could be causing this to not work?
Related
Trying to host a react app on github pages but when the website opens in Firefox the favicon will not show up.
Tried resetting cache and browser and use multiple variations of the code below but still will not show.
Used https://convertio.co/png-ico/ for making the ico file. Does anyone know what is going on ? This works perfectly on chrome etc.
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
I am trying to create favicon for my website (it is not live yet.) Favicon shows on Chrome but not on Safari 14. I have the setting to see websites' favicon turned on. I also tried cleaning Safari's favicon cache. I am using an PNG photo. What shows on Safari is more like a dull/flat representation. Safari Chrome
I tried these websites:
https://favicon.io
https://www.favicon-generator.org
https://realfavicongenerator.net
They all work on Chrome but not on Safari.
I solved it. So, instead of deleting files in ~Library/Safari/Favicon Cache, I had to empty the entire Safari cache from Develop menu or using this keyboard shortcut ⌥⌘E
You would need to have two links,
<link rel="shortcut icon" type="image/png" href="yourfavicon.png"/> (for chrome)
<link rel="apple-touch-icon" href="yourfavicon.png"> (safari)
Just place both tags in the <head> section of your HTML. Here's the link if you want to read more: https://css-tricks.com/favicon-quiz/
Unsolved
I want the proper png to show up in the browser tab while still maintain the app I use to connect my website with uses the gif favicon
So I'm using metamask as an extension and it automatically looks for the first favicon so thus my first favicon is a gif for an animation. But while firefox automatically uses the png version of my favicon, how do I get a browser like Chrome to use the png version as well in the browser tab menu?
So the HTML goes like this...
<link rel="icon" href="%PUBLIC_URL%/animation.gif" type="image/gif" >
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon144.png" />
The first is the gif which I need to be first due to metamask and the second is the png version which chrome skips over.
I am currently using Chrome version 79.0.3945.117. Using this code in HTML, it correctly displays the PNG icon.
Code:
<link rel="icon" href="animation.gif" type="image/gif" >
<link rel="shortcut icon" href="favicon.png">
There doesn't seem to be any problems or interferences with my case.
For debugging, I recommend that you check for any 404 errors finding the image, or in other words, the wrong href route. Also, try clearing the cache of your browser and reload.
Glad to answer.
I'm trying to make my favicon works on IE11.
After reading many tutorials, I found the solution below, adding
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
Issue is the favicon is not appearing on IE11. Weird thing is the line below makes the favicon working on Firefox and Chrome as Firefox and Chrome can see properly where is the icon.
<link rel="icon" type="image/x-icon" href="./assets/favicon_bnp.png">
However, when I change the first line to the line below, hosting the favicon on a server, the favicon is appearing on IE11, Firefox and Chrome.
<link rel="shortcut icon" href="http://www.iconj.com/ico/f/q/fqp4dvw03t.ico" type="image/x-icon" />
What I would like is to have the href use a relative path.
Except the URL, I've tried to change favicons, change paths, to no avail.
Any hints are welcomed.
There're some solutions about this issue:
Make sure the image a real ico file and put it in the root folder of your web server. Renaming a bitmap is not a real ico. I use https://favicon.io/ to generator favicon and it can work in iE.
Make sure the <link> tag of the ico is between the <head> and use absolute path instead of relative path.
Delete your temporary Internet files and clear cache of IE. If the folder with temporary files has reached its maximum, the favicon may not be used.
For more information, you could refer to this thread and this thread and try the workarounds in them.
I am trying out icons for the title bar and address bar in the latest html.
I was wondering how to make it compatible with the latest version of IE and Chrome.
Has anyone run into a similar issue?
I got it to work on Firefox with:
link rel="shortcut icon" href="foo.ico" type= "image/x-icon"
Thanks!
According to Wikipedia this will work in all major browsers:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
You can also name your file favicon.ico and it will be displayed automatically. Sometimes it takes a while until your browser refreshes the favicon. Try the private/ incognito mode which ignores the caches.
Also confirm that your browser finds the file by opening it directly.