Add a Custom App Icon to a PWA built with create-react-app
We'll add a custom app icon to our PWA, and specify those new icon sizes in the manifest.json file, which defines our PWA to the browser. That will add the icons that will allow us to install the app on Android, Chrome, and iOS.
Instructor: [00:01] Open the manifest.json file in the public folder. You can see the current icon, which is a fab icon. It contains several pixel sizes. Before we install the PWA on Chrome or on a mobile device, we'll want to at least a few more icon sizes of the app.
[00:20] For Android, there's a 144 pixel icon and a 192 pixel icon. For the Chrome App home screen, there's a 512 pixel icon. For iOS, there's 120, 152, 167, and 180 pixel sizes. For iOS, it's also important that there's no transparency in these icons.
[00:43] Let's copy these icons into the public folder. Then back in the manifest file, we can add these entries to the icons array for each one of those sizes. Then for iOS to properly detect those icons, open index.html and we'll add links for each icon at each size. You can also find these sizes in Apple's documentation.
[01:18] Now, let's build and serve the app. If we reload and view the application tab, we can see the new icons.