CODEWITHSUNDEEP
htmlreactjsfavicon
billy xu
billy xu

Reputation: 3

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

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

Upvotes: 0

Views: 697

Answers (1)

Dai
Dai

Reputation: 155045

<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">

Upvotes: 0

Related Questions