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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!