CODEWITHSUNDEEP
reactjsfavicon
sujana
sujana

Reputation: 135

How to add favicon to react application browser tab (duplicate)

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.

Upvotes: 8

Views: 32523

Answers (7)

enchance
enchance

Reputation: 30501

I prefer to generate multiple versions using a generator like this one. Since there are now multiple sizes instead of the usual one-size-fits-all, place all the images in public/favicons/ then update <head>.

Firstly, delete these since you'll be placing your own:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon-16x16.png" />

Paste the new markup and update each one to use the correct path by prefixing it with %PUBLIC_URL%/favicons/. Take note to also update the path for manifest.json.

<link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png">
<link rel="manifest" href="%PUBLIC_URL%/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#46179c">
<meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#46179c">

Lastly, delete the default manifest.json file as you'll now be using the one in your public/favicons/ folder. Update the image paths in /public/favicons/manifest.json.

Upvotes: 0

thinkerBOB
thinkerBOB

Reputation: 176

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

Upvotes: 0

Amit Kundu
Amit Kundu

Reputation: 119

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

Upvotes: 2

nilemandal
nilemandal

Reputation: 30

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

Upvotes: 0

korbendalas
korbendalas

Reputation: 1

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

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 145

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

Upvotes: 7

Araz Babayev
Araz Babayev

Reputation: 1770

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

Upvotes: 10

Related Questions