From the course: React: Building Progressive Web Apps (PWAs)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add a custom icon

Add a custom icon - React.js Tutorial

From the course: React: Building Progressive Web Apps (PWAs)

Start my 1-month free trial

Add a custom icon

- [Instructor] In the previous video we looked at the manifest file, and we saw how a Lighthouse check showed us some manifest errors, like PNG icons of certain sizes not being present. Now we're going to go ahead and clear this by creating some different icons of different sizes that can be associated with our PWA. Now think about an app. You go to your home screen, you click on a button, and then your app opens up. We need to create different size icons for each of these so that when our users install our applications they're able to open them. So, let's go ahead and go to our code. We're going to see that there is a new file here called moon.png, and the moon.png file is going to be our file that we'll use to create all sorts of different size icons for various devices. Now we're going to go ahead and open this from our student files, and we're going to then open up this file in Preview. So, let's go ahead and resize this. Now, of course, if you're using a different image editing…

Contents