Search code examples
reactjsfaviconvite

Why is the favicon only shown in the root page?

I have a react app and a favicon icon in the folder src. It is only shown for the root path, the other pages cannot find it. In the developer tools, it show a wrong path for a subpage, it tries to get the favicon from http://localhost:3000/faq/src/favicon.ico

index.html

<link rel="icon" type="image/svg+xml" href="src/favicon.ico">

it works for http://localhost:3000/ but not for

http://localhost:3000/faq
Solution

  • Putting your favicon under your public directory would be best.

    |
 `--- public
     |
      `--- favicon.ico

    And then refer to it in your index.html file like this:

    <link rel="icon" href="/favicon.ico" />

    In React, you can also do the following:

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />