Sign in Subscribe

Expo Adaptive App Icon

Domenic H

• 1 min read

Developing an Android app using Expo, you may find that your application icon doesn't scale correctly and appears cut off or not centered properly.

You should start with a source icon that is 1024x1024 PNG, mine has transparency too, this will let you generate adaptive icons that you can use in your Expo app.

  • You should use seperate images for both icon.png and adaptive-icon.png.
  • adaptive-icon.png should have enough empty space around the outside of the icon, following the template.

Assuming you created your app with expo init; you should have configuration like this in the app.json file of your Evpo app:

{
    "expo": {
        ...
        "icon" : "./assets/icon.png"
        ...
        "android": {
            "adaptiveIcon": {
                "foregroundImage": "./assets/adaptive-icon.png",
                "backgroundColor": "#FFFFFF"
            },
        }
        ....
    }
}

You should also see the default adaptive-icon.png file:

adaptive-icon.png

You can open this template in an image editor (one that supports layers) and scale your app's icon till it's within the outer circle.

Then, you can delete the template layer and save your adaptive icon.

References

Sign up for more like this.

Enter your email
Subscribe