How to Change Your React Favicon and Social Preview Images

The first step we need to take to prepare our app to be deployed to the internet is to update its metadata — things like site title, description, share images, favicon, etc.

Until now, we've just been using Create React App's default favicon and site title:

We can spruce these things up a little to be more descriptive of our app. To do this, we'll pop open our client/public/index.html file.

First, we'll update the <title> tag to something more fitting:

xxxxxxxxxx

    <title>Spotify Profile</title>

Then, we can update the theme color and description meta tags as well.

xxxxxxxxxx

    <meta name="theme-color" content="#1DB954" />

    <meta name="description" content="Web app for visualizing personalized Spotify data"

Adding a favicon#

The next thing we can do is add a custom favicon (the little icon that shows up in the browser tab). Since our app mainly revolves around Spotify, we'll use the Spotify icon. (Feel free to choose something else if you want!)

There are many ways to create a favicon — googling "favicon generator" will easily give you ten good options. An easy way I've done it in the past is with https://favicon.io/.

If you have a png of the image you want to use for your favicon, all you have to do is upload it to favicon.io and they'll automatically give you a zip file of favicons to download. Once extracted, the contents of that zip file should look something like this:

• android-chrome-192x192.png

• android-chrome-512x512.png

• apple-touch-icon.png

• favicon-16x16.png

• favicon-32x32.png

• favicon.ico

• site.webmanifest