Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: 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.

    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.

    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.

    Now, let's build and serve the app. If we reload and view the application tab, we can see the new icons.