Adding favicon to <Helmet/> in React
14,627
Solution 1
If you are using react-helmet in your project then I think one issue with your code is that link should be singular, not the plural 'links'
Try this
import Helmet from 'react-helmet'
...
<Helmet>
<title>ABC</title>
<meta name="ABC" content: "ABC" />
<link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
</Helmet>
Solution 2
Try this please. You written wrong keyword(links => link)
<Helmet
title="ABC"
meta={[
{ name: "ABC", content: "ABC" }
]}
link={[
{"rel": "icon",
"type": "image/png",
"href": "favicon.ico"
}
]}
/>
Solution 3
Lucas's solution almost worked for me except I needed to import the favicon into the react component and use it as a js variable:
import Helmet from 'react-helmet'
import favicon from './favicon.ico';
...
<Helmet>
<title>ABC</title>
<meta name="ABC" content: "ABC" />
<link rel="icon" type="image/png" href={favicon} sizes="16x16" />
</Helmet>```
Author by
UWGOOSE
Updated on June 12, 2022Comments
-
UWGOOSE almost 2 years
I was trying to add a favicon in the
<Helmet/>
tag of a React Appmy current
<Helmet/>
tag looks like this.<Helmet title="ABC" meta={[ { name: "ABC", content: "ABC" } ]} links={ rel='icon', type='image/png', sizes='16x16', href={require('favicon.ico')} } />
But I'm getting an error about an unexpected token, any inputs on how to add a favicon? Thanks for the help in advance.