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
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Add a Custom App Icon to a PWA built with create-react-app

    Chris AchardChris Achard
    reactReact
    16.6.3-16.8.6
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a 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
    Discuss

    Discuss

    Transcript

    Transcript

    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.