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
>Solution :
<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 thehrefattribute:href="/img/favicon.ico". - Also, it’s conventional to always serve the favicon from
/favicon.icofor 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.icofile (which contains multiple images at different sizes). If the file is actually a single-frame.pngimage or similar then useimage/pngor whatever the type is.
So you should have:
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">