CODEWITHSUNDEEP
reactjs
swathi
swathi

Reputation: 5

favicon to react application doesn't work

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.

Upvotes: 0

Views: 5342

Answers (1)

Chukwuemeka Onyenezido
Chukwuemeka Onyenezido

Reputation: 349

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.

Upvotes: 1

Related Questions