Home > Enterprise >  How to custome the request URL for favicon.ico. And the favicon.ico did not load correctly
How to custome the request URL for favicon.ico. And the favicon.ico did not load correctly

Time:10-07

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, not favicon.icon, so correct the file-extension in the href 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" (or image/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 use image/png or whatever the type is.

So you should have:

<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
  • Related