How to Change Your React Favicon and Social Preview Images

[00:00 - 00:11] Okay, so 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, and favicons.

[00:12 - 00:22] So until now, we've been using Create React apps, default favicon, and site title, just React app. We can spruce these things up a little to be more descriptive of our app.

[00:23 - 00:34] To do this, we'll pop open the index.html file in our React app. First, we'll update the title to be something more fitting.

[00:35 - 00:45] We'll call it Spotify Profile. And then we can update the theme color and description meta tags as well.

[00:46 - 01:08] We can use the Spotify green that we stored as our green CSS variable here. Update this hex value, and then we can update this description meta tag to say something like, "We have app for visualizing personalized Spotify data."

[01:09 - 01:17] So the next thing we want to do is add a custom favicon. Since our app mainly revolves around Spotify, we're going to use the Spotify icon.

[01:18 - 01:29] There are a lot of different ways to create a favicon, and Googling favicon generator will easily give you 10 good options. An easy way I've done it in the past is with a site called favicon.io.

[01:30 - 01:44] This site makes it really easy to generate favicons from different inputs, like a PNG, text, or even an emoji. And since I have this PNG of the Spotify logo downloaded, I'm going to use that .

[01:45 - 01:58] So I'll click on PNG to IKO, and then I'll drag and drop this Spotify icon PNG in here, and then I'll hit download. Once I download the zip file, I'll extract it.

[01:59 - 02:14] And then if you take a look, we have a bunch of different sizes of these images , and they're all in favicon format. So now I'll just copy this entire folder, and then I'll go on over to my New line Spotify app project in my computer.

[02:15 - 02:26] And in the client directory under public, I'll just paste this favicon_ico folder. I'll rename it to favicons just for clarity.

[02:27 - 02:44] Now in our index.html file, we're going to use these favicon files and update our link tags. So here, I'll say favicons/favicon.ico, since I want to use this Spotify icon instead of this React icon.

[02:45 - 03:12] And then I will replace this manifest.json and this logo 192.png with our updated link tags, referring to our favicons directory here with Apple Touch icon with the 32 by 32 and 16 by 16 PNGs. Give that a save, and you should see the favicon you have in the browser tab here.

[03:13 - 03:29] We can also take a look at the manifest file here, and we'll update these values to reflect our app. So we'll say name is Spotify profile, and we can say the same for short name.

[03:30 - 03:41] And then for theme color and background color, we can just use the green for the theme color and this near black color for our background color. Awesome.

[03:42 - 03:56] Now we can just pop open the console to take a look at the head tag of our app and make sure those values are reflected. Alright, so the last thing we need to do is add an OG image.

[03:57 - 04:07] This is the image that's shown when you share the site on social media, on platforms like Twitter or Facebook. A quick and easy way to create an OG image is just to take a screenshot of our app.

[04:08 - 04:15] So that's what we're going to do. I'll open up our site in responsive device dev tools here.

[04:16 - 04:25] And instead of one of these devices, I'm just going to set it to responsive. And I'll open it up here just so I can see better.

[04:26 - 04:43] But since it's recommended that OG images are 1200 pixels wide and 630 pixels tall, an easy way to make sure our screenshot is those dimensions is by specifying them here. So 1200 by 630.

[04:44 - 04:50] So here, all I need to do is take a screenshot. So I'll say capture screenshot.

[04:51 - 05:02] And then it's going to download to my downloads folder and I'll just call it OG . And I'll just take a look at this. Looks like it's all good.

[05:03 - 05:14] And then I'll head on over to that file that I just saved OG.png. I'll copy it and then I'll put it in my public directory.

[05:15 - 05:34] Then in our index.html, I'll just add these meta tags here, which reference the OG.png image I have. There are some Twitter specific meta tags in here just to describe our app and specify what kind of card format we want.

[05:35 - 05:47] Give that a save and we can check out the head tag here and make sure all of our meta tags are present. Cool. So we won't be able to actually test if these meta tags are kicking in until our site has been deployed.

[05:48 - 05:51] So let's keep on going with our other preparations.