How to change React boilerplate icon/text

I'm gonna show you how we can go from this:

To this:

In just a few simple steps

So,

After hours of sweat, grind and code you've finally deployed your project. You think it's all over, and that the game is won.

That is, until you look up and to the left and see "React app" plastered across your beautiful app.

It's never truly over now is it? Welcome to programming.

In all honesty, recruiters don't want to see that. It gives the impression that you don't refine all the edges, and may very well be the deciding factor in moving on to the next applicant. Good news is that if you're reading this, that isn't going to be you.

How to Change the boilerplate display

1. Do not deploy until the end of this blog

There are some default mechanisms in place that, in the case of deploying before finishing, will reset all the progress you've made. Heed my warning, you will be very mad.

2. Take a look at the folders on the right.

Chances are, if you're seeing boilerplate, you've ran create-react-app some way or another. You should see two folders. Public and Build. We will focus on 4 of the same files within each: manifest.json, index.html, favicon.io and logo192.png.

3. Set up your replacement pictures

You're gonna need two files. The first, a .io (favicon icon) file, and the second, a .png file. The first is gonna be for web browsers, the second for mobile devices like you saw in the beginning of this blog.

I recommend using https://favicon.io/favicon-converter/ for your .io file. It is free and easily accessible. Zero hassle.

Once you've got them ready to use, load 'em up into build and public.

4. Replacement time

Go ahead and delete favicon.io and logo192.png, we won't be needing them anymore.

Next, next head into one of the manifest.json files.

They are the exact same and should look a little like this:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Edit your short_name, name and src lines to your respective file names.

Finally, head into index.html and find/replace these lines:

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

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

<title>React App</title>

Run deploy and there you have it!

Look how nice. Go ahead and pat yourself on the back, you're now a more robust programmer 😄

If you liked the article, consider giving me a follow!
I'm always updating the webiverse with more how-to content.

Also, connect with me on Linkedin! https://www.linkedin.com/in/nathanhains/
Always up to meet new people.

Aside from that, I hope you have an excellent day!!!