8

I am new to react. Could someone help me in adding favicon to react application. I have created favicon package and added generated code to index.html. But I am not knowing how this href to favicon to be specified.

Thanks.

coder
  • 8,346
  • 16
  • 39
  • 53
sujana
  • 135
  • 1
  • 3
  • 11
  • 7
    Possible duplicate of [Add Favicon with React and Webpack](https://stackoverflow.com/questions/37298215/add-favicon-with-react-and-webpack) – vahdet Jul 04 '18 at 12:30

6 Answers6

10

You can add favicon.ico to public/images then enter the index.html and add the code.

<link rel="shortcut icon" href="./images/favicon.ico">
Araz Babayev
  • 1,752
  • 12
  • 16
6

if you have your own image then simply change this line to your image address

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

just change the favicon.ico to your image name

    <link rel="shortcut icon" href="%PUBLIC_URL%/coolImage.png">
Muhammad Usman
  • 135
  • 3
  • 9
2

If anyone is looking in 2021. Place your image in the Public folder and change the following icons with your ones on the following page.

/pubic/index.html

  <link rel="icon" href="%PUBLIC_URL%/youricon.svg" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/youricon.svg" />
Amit Kundu
  • 119
  • 5
0

Move your favicon image in public folder. Rename in manifesto.json name of favicon. Update link in index.html

korbendalas
  • 1
  • 1
  • 3
0

just rename your image with favicon.ico in public directory and it will get that img as favicon icon for your react project.

Thank You.

File name changed as favicon.ico

file name changed as favicon.ico

blazej
  • 927
  • 4
  • 11
  • 21
nilemandal
  • 30
  • 1
  • 7
0

To change browser tab Icon just get into index.html file then as follows :-

If your img is icon then follows the below syntax :-

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

If your img is png/jpg then follows the below syntax :-

<link rel="icon" href="./book_PNG.png" />
thinkerBOB
  • 128
  • 2
  • 11