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" />
CodePudding user response:
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.