favicon.svg not showing in title bar
Question
I have worked on this for days trying to solve the problem. I can't get the favicon.svg to show up on my browser (using latest Chrome).
The source file is
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48"><path stroke="black" stroke-linecap="round" d="M6,6 L21,21 M6,21 L21,6"/></svg>
The icon shows fine in the main screen if I navigate to http://MYSITEHERE/favicon.svg
BUT it does not show up when I navigate to http://MYSITEHERE
The website is working otherwise and starts with:
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="UTF-8">
<title>Administrator Login - CLO Web Design</title>
<link rel="icon" href="/favicon.svg" sizes="any">
<link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet'>
<style>....
Any ideas? I have scoured the web trying to find answers. Most places say to include the
<link rel="icon" href="/favicon.svg" sizes="any">
and it will be fine (which I have). Its also 48x48 which should be accepted by Google. Why not?
Many thanks.
[Update 28/12/2022 based on Sebastian Simon's help - see below]
2 answers
solution1
0 2022-12-27 01:31:22
You should add the type also: type="image/svg+xml" and make sure that the path is correct. Check the browser console for any loading errors that might suggest you are using the wrong relative path.
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml" />
solution2
0 2022-12-27 23:03:19
Ok, I have found a "work around":
<link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 64 64'><path stroke='black' stroke-linecap='round' d='M6,6 L21,21 M6,21 L21,6'/></svg>" sizes="any" type="image/svg+xml" />
This doesn't exactly explain why the favicon was not showing earlier, but at least it solves the problem and actually is probably more efficient preventing the additional favicon request...
(PS. ignore the icon data which is just an "x" - I intend to change that.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.