0

I want to add a favicon to my react application but it doesn't seem to working.

Tried the below: add the code to the index.html file in the head section

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#ffc40d">

<meta name="theme-color" content="#ffffff">

Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.

Thanks.

Amit Verma
  • 8,660
  • 8
  • 35
  • 40
swathi
  • 5
  • 1
  • 3
  • For favicon try using ico files instead of png – Help Jul 03 '18 at 11:07
  • 1
    Possible duplicate of [How to add a browser tab icon (favicon) for a website?](https://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website) – user7637745 Jul 03 '18 at 11:08
  • Possible duplicate of [Add Favicon with React and Webpack](https://stackoverflow.com/questions/37298215/add-favicon-with-react-and-webpack) – Rehan Haider Jul 03 '18 at 11:08
  • Is the favicon in the folder after you build the app? Do you get a console error saying it can't find the icon? – Jayce444 Jul 03 '18 at 11:35
  • I dont see any error on the console...to test if it actually works i place the ico files and other .png files in the same location as index.html file. so the directory structure is folder->app->index.hml and favicon.ico – swathi Jul 03 '18 at 11:49

1 Answers1

1

Remember to add %PUBLIC_URL% to all your href attributes in index.html

For example;

<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">

That should fix your issue.

Chukwuemeka Onyenezido
  • 329
  • 2
  • 5