Adding favicon to in React

Question

I was trying to add a favicon in the <Helmet/> tag of a React App

my 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.

Just fyi: when you open braces in jsx you're back to writing js, and the value inside `links={...}` isn't valid js. — Alex Guerra, Apr 06 '18 at 22:44

score 12 · Answer 1 · answered Apr 06 '18 at 23:04

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>

score 6 · Answer 2 · answered Nov 21 '18 at 08:18

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"
              }
             ]}
/>

kbooth1000 · Answer 3 · 2020-07-12T20:56:33.677

2

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

edited Jul 12 '20 at 20:56

answered Jul 12 '20 at 20:34

kbooth1000

71
3

score 0 · Answer 4 · edited Nov 13 '21 at 04:40

0

To solve this problem we can add data-react-helmet="true" on the favicon link tag like this.

Your index.html page:

<html lang="en">
  <head>
    <link id="favicon" rel="icon" href="/favicon.ico" type="image/x-icon" data-react-helmet="true" />
  <head>
</html>

Your component page:

<Helmet>
  <link id="favicon" rel="icon" href="/new-favicon.ico" type="image/x-icon"/>
</Helmet>

edited Nov 13 '21 at 04:40

tdy

36,675
19
86
83

answered Nov 11 '21 at 08:53

Md Masud Rana

1
2

Adding favicon to in React

4 Answers4