I am using react to build my web page. I placed my favicon.ico in my public/img folder. And the href of favicon.ico has set to /img/favicon.ico. But the favicon can not be load. After I check the favicon.ico request url in Chrome it is still http://localhost:3000/favicon.ico. I want the request url be http://localhost:3000/img/favicon.ico
This is my code for icon link
<head>
...
<link ref="icon" href="/img/favicon.icon" type="image/x-icon">
...
</head>
Very thanks
CodePudding user response:
<head> <link ref="icon" href="/img/favicon.icon" type="image/x-icon"> </head>
There's a few things wrong with your above code:
- It's
<link rel="icon">
not<link ref="icon">
. - Your post says the filename is
favicon.ico
, notfavicon.icon
, so correct the file-extension in thehref
attribute:href="/img/favicon.ico"
. - Also, it's conventional to always serve the favicon from
/favicon.ico
for the benefit of pages that lack the<link rel="icon">
element, as most browsers will always check/favicon.ico
. - Also, only use
type="image/x-icon"
(orimage/vnd.microsoft.icon
) if the file actually is a Win32.ico
file (which contains multiple images at different sizes). If the file is actually a single-frame.png
image or similar then useimage/png
or whatever the type is.
So you should have:
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">