Favicon only showing for index route

Question

I'm running a react / webpack application and the favicon does not show when loading any route of my app other than the index ("/").

/public/app-bundle.js --> react/webpack bundle

/public/favicon --> directory with favicon assets

/public/index.html --> see below

  <link
  rel="apple-touch-icon"
  sizes="180x180"
  href="./favicon/apple-touch-icon.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./favicon/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="./favicon/favicon-16x16.png"
/>
<link rel="manifest" href="./favicon/site.webmanifest" />
<link
  rel="mask-icon"
  href="./favicon/safari-pinned-tab.svg"
  color="#5bbad5"
/>
<link rel="icon" href="./favicon/favicon.ico" />

Answer 1

Please consider the page will request pages from the server, not from the filesystem

So remove "." before on hrefs.

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/favicon/apple-touch-icon.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicon/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
<link
  rel="mask-icon"
  href="/favicon/safari-pinned-tab.svg"
  color="#5bbad5"
/>
<link rel="icon" href="/favicon/favicon.ico" />

Remember if starting with slash ("/") means get from server root if not relative where baseUrl is.