Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 8 · 1 / 4Icons, names and screenshots
Phase 8Ship it to the Play Store
4 topics · 2–3 wks
  1. 1Icons, names and screenshots
  2. 2Building a release with EAS
  3. 3Play Console and internal testing
  4. 4Your store listing and release
JourneyPhase 8Icons, names and screenshots
01 / 08Overview

Icons, names and screenshots

You'll learn to give your app a real name, an id, an icon and a splash screen in app.json, and take screenshots Google Play will accept.

Why it mattersThis is the first thing people see on the Play Store. A blurry icon or a cut-off name makes a good app look unfinished.
about 60 min·needs: Your first Expo app, Saving data on the phone
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
How to create beautiful icons and splash screens for mobile appsExpo · YouTube · 9 min · English
MMamun's noteBeto from the Expo team. Watch 5:17 to 12:35: the Android adaptive icon, the splash icon, exporting, and setting both in app.json. Skip the iOS icon part at the start for now.
Docs
Splash screen and app iconExpo docs · 15 min · English
MMamun's noteThe official steps with the sizes. Read the app icon part, the Android part and the splash screen part. It also has a free Figma template for icons.
DocsOptional
Adaptive iconsAndroid Developers · 10 min · English
MMamun's noteLook at the pictures of the masks and the safe zone. That is why your logo must stay in the middle. Skip the code and XML.
DocsOptional
Add preview assets to showcase your appPlay Console Help · 10 min · English
MMamun's noteGoogle's own rules for icons and screenshots. Read the Screenshots part before you take yours, so you crop them once, not twice.
03 / 08

Explanation

Your habit tracker works in Expo Go. Before it can go on Google Play, it needs a proper name, an icon, and a few screenshots. All of this starts in one file.

That file is app.json, called the app config. Think of it like the label on a bottle of water. The water is your code. The label says the brand name, shows the logo, and has a barcode that is never reused. Your code does not change. Only the label does.

{
"expo": {
"name": "Daily Habits",
"slug": "daily-habits",
"icon": "./assets/images/icon.png",
"android": { "package": "com.nusratdev.habits" }
}
}
  • name is the name under the icon on the home screen.
  • slug is a short id for your project on expo.dev. People never see it.
  • icon is the picture. The Expo docs say 1024x1024 PNG is a good size, and it must be exactly square.
  • android.package is the barcode. It is your app's id on Google Play, like com.nusratdev.habits. Small letters, numbers and _, separated by dots. Pick it once, carefully. After you publish, never change it. The Android docs say Play treats a new package as a completely different app.

Android phones cut icons into different shapes: a circle on one phone, a rounded square on another. So Android uses an adaptive icon: a front layer (your logo) on top of a back layer (a colour). In app.json this is android.adaptiveIcon with foregroundImage and backgroundColor. The Android docs say each layer is 108x108 dp, and only the middle 66x66 dp is always safe from cutting. So keep your logo small and in the centre, with empty space around it.

The splash screen is the picture shown for a moment while the app opens. In current Expo SDKs you set it with the expo-splash-screen plugin in app.json: an image, an imageWidth and a backgroundColor. Expo Go shows its own icon here, so the docs say to check your splash screen in a real build, which you make in the next topic.

Screenshots come from your own phone. Open the app, add three real habits, and take screenshots of your best screens. Google Play has rules for them (as of October 2026): JPEG or PNG without transparency, each side between 320 and 3840 pixels, and the long side can't be more than twice the short side.

People often upload phone screenshots straight from a modern phone. Many phones today make screenshots like 1080x2400. That is more than twice as tall as it is wide, so Play refuses it. Crop it to 1080x1920 (9:16), or place it on a 1080x1920 background in Figma or Canva.

When you read an app.json, look for four things: the name people will see, an android.package you are happy to keep forever, icon files that really exist at those paths, and an adaptive icon with a background colour that matches your logo.

Words to recognise
app.jsonapp configslugandroid.packageiconadaptive iconsplash screenscreenshotaspect ratio
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

app.json8 notes
1{
2 "expo": {
"name": "Daily Habits",
Mentor note · line 3
The name under the icon on the home screen. Keep it short so the phone does not cut it to "Daily Hab...".
"slug": "daily-habits",
"version": "1.0.0",
"icon": "./assets/images/icon.png",
7 "android": {
"package": "com.nusratdev.habits",
9 "adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#E8F5E9"
12 }
13 },
14 "plugins": [
["expo-splash-screen", {
16 "image": "./assets/images/splash-icon.png",
17 "imageWidth": 200,
18 "backgroundColor": "#E8F5E9"
19 }]
20 ]
21 }
22}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Your app is on Google Play as com.rafi.tapgame. You change it to com.rafi.jumpgame and upload. What happens?
  2. 2 / 3Your phone makes screenshots of 1080x2400 pixels. Google Play refuses them. Why?
  3. 3 / 3On a friend's phone, your icon logo is cut at the edges. What should you change?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Icons, names and screenshots?

08 / 08

Done

You can now
Read an app.json, say what each field shows on the phone, and fix an icon or screenshot that Google Play would refuse.
Next: Building a release with EAS Back to Phase 8
On this page
  1. 01Icons, names and screenshots
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 8Ship it to the Play Store
4 topics · 2–3 wks
  1. 1Icons, names and screenshots
  2. 2Building a release with EAS
  3. 3Play Console and internal testing
  4. 4Your store listing and release
JourneyPhase 8Icons, names and screenshots
01 / 08Overview

Icons, names and screenshots

You'll learn to give your app a real name, an id, an icon and a splash screen in app.json, and take screenshots Google Play will accept.

Why it mattersThis is the first thing people see on the Play Store. A blurry icon or a cut-off name makes a good app look unfinished.
about 60 min·needs: Your first Expo app, Saving data on the phone
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
How to create beautiful icons and splash screens for mobile appsExpo · YouTube · 9 min · English
MMamun's noteBeto from the Expo team. Watch 5:17 to 12:35: the Android adaptive icon, the splash icon, exporting, and setting both in app.json. Skip the iOS icon part at the start for now.
Docs
Splash screen and app iconExpo docs · 15 min · English
MMamun's noteThe official steps with the sizes. Read the app icon part, the Android part and the splash screen part. It also has a free Figma template for icons.
DocsOptional
Adaptive iconsAndroid Developers · 10 min · English
MMamun's noteLook at the pictures of the masks and the safe zone. That is why your logo must stay in the middle. Skip the code and XML.
DocsOptional
Add preview assets to showcase your appPlay Console Help · 10 min · English
MMamun's noteGoogle's own rules for icons and screenshots. Read the Screenshots part before you take yours, so you crop them once, not twice.
03 / 08

Explanation

Your habit tracker works in Expo Go. Before it can go on Google Play, it needs a proper name, an icon, and a few screenshots. All of this starts in one file.

That file is app.json, called the app config. Think of it like the label on a bottle of water. The water is your code. The label says the brand name, shows the logo, and has a barcode that is never reused. Your code does not change. Only the label does.

{
"expo": {
"name": "Daily Habits",
"slug": "daily-habits",
"icon": "./assets/images/icon.png",
"android": { "package": "com.nusratdev.habits" }
}
}
  • name is the name under the icon on the home screen.
  • slug is a short id for your project on expo.dev. People never see it.
  • icon is the picture. The Expo docs say 1024x1024 PNG is a good size, and it must be exactly square.
  • android.package is the barcode. It is your app's id on Google Play, like com.nusratdev.habits. Small letters, numbers and _, separated by dots. Pick it once, carefully. After you publish, never change it. The Android docs say Play treats a new package as a completely different app.

Android phones cut icons into different shapes: a circle on one phone, a rounded square on another. So Android uses an adaptive icon: a front layer (your logo) on top of a back layer (a colour). In app.json this is android.adaptiveIcon with foregroundImage and backgroundColor. The Android docs say each layer is 108x108 dp, and only the middle 66x66 dp is always safe from cutting. So keep your logo small and in the centre, with empty space around it.

The splash screen is the picture shown for a moment while the app opens. In current Expo SDKs you set it with the expo-splash-screen plugin in app.json: an image, an imageWidth and a backgroundColor. Expo Go shows its own icon here, so the docs say to check your splash screen in a real build, which you make in the next topic.

Screenshots come from your own phone. Open the app, add three real habits, and take screenshots of your best screens. Google Play has rules for them (as of October 2026): JPEG or PNG without transparency, each side between 320 and 3840 pixels, and the long side can't be more than twice the short side.

People often upload phone screenshots straight from a modern phone. Many phones today make screenshots like 1080x2400. That is more than twice as tall as it is wide, so Play refuses it. Crop it to 1080x1920 (9:16), or place it on a 1080x1920 background in Figma or Canva.

When you read an app.json, look for four things: the name people will see, an android.package you are happy to keep forever, icon files that really exist at those paths, and an adaptive icon with a background colour that matches your logo.

Words to recognise
app.jsonapp configslugandroid.packageiconadaptive iconsplash screenscreenshotaspect ratio
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

app.json8 notes
1{
2 "expo": {
"name": "Daily Habits",
Mentor note · line 3
The name under the icon on the home screen. Keep it short so the phone does not cut it to "Daily Hab...".
"slug": "daily-habits",
"version": "1.0.0",
"icon": "./assets/images/icon.png",
7 "android": {
"package": "com.nusratdev.habits",
9 "adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#E8F5E9"
12 }
13 },
14 "plugins": [
["expo-splash-screen", {
16 "image": "./assets/images/splash-icon.png",
17 "imageWidth": 200,
18 "backgroundColor": "#E8F5E9"
19 }]
20 ]
21 }
22}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Your app is on Google Play as com.rafi.tapgame. You change it to com.rafi.jumpgame and upload. What happens?
  2. 2 / 3Your phone makes screenshots of 1080x2400 pixels. Google Play refuses them. Why?
  3. 3 / 3On a friend's phone, your icon logo is cut at the edges. What should you change?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Icons, names and screenshots?

08 / 08

Done

You can now
Read an app.json, say what each field shows on the phone, and fix an icon or screenshot that Google Play would refuse.
Next: Building a release with EAS Back to Phase 8
On this page
  1. 01Icons, names and screenshots
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

Your habit tracker works in Expo Go. Before it can go on Google Play, it needs a proper name, an icon, and a few screenshots. All of this starts in one file.

That file is app.json, called the app config. Think of it like the label on a bottle of water. The water is your code. The label says the brand name, shows the logo, and has a barcode that is never reused. Your code does not change. Only the label does.

{
"expo": {
"name": "Daily Habits",
"slug": "daily-habits",
"icon": "./assets/images/icon.png",
"android": { "package": "com.nusratdev.habits" }
}
}
  • name is the name under the icon on the home screen.
  • slug is a short id for your project on expo.dev. People never see it.
  • icon is the picture. The Expo docs say 1024x1024 PNG is a good size, and it must be exactly square.
  • android.package is the barcode. It is your app's id on Google Play, like com.nusratdev.habits. Small letters, numbers and _, separated by dots. Pick it once, carefully. After you publish, never change it. The Android docs say Play treats a new package as a completely different app.

Android phones cut icons into different shapes: a circle on one phone, a rounded square on another. So Android uses an adaptive icon: a front layer (your logo) on top of a back layer (a colour). In app.json this is android.adaptiveIcon with foregroundImage and backgroundColor. The Android docs say each layer is 108x108 dp, and only the middle 66x66 dp is always safe from cutting. So keep your logo small and in the centre, with empty space around it.

The splash screen is the picture shown for a moment while the app opens. In current Expo SDKs you set it with the expo-splash-screen plugin in app.json: an image, an imageWidth and a backgroundColor. Expo Go shows its own icon here, so the docs say to check your splash screen in a real build, which you make in the next topic.

Screenshots come from your own phone. Open the app, add three real habits, and take screenshots of your best screens. Google Play has rules for them (as of October 2026): JPEG or PNG without transparency, each side between 320 and 3840 pixels, and the long side can't be more than twice the short side.

People often upload phone screenshots straight from a modern phone. Many phones today make screenshots like 1080x2400. That is more than twice as tall as it is wide, so Play refuses it. Crop it to 1080x1920 (9:16), or place it on a 1080x1920 background in Figma or Canva.

When you read an app.json, look for four things: the name people will see, an android.package you are happy to keep forever, icon files that really exist at those paths, and an adaptive icon with a background colour that matches your logo.

Words to recognise
app.jsonapp configslugandroid.packageiconadaptive iconsplash screenscreenshotaspect ratio

Your habit tracker works in Expo Go. Before it can go on Google Play, it needs a proper name, an icon, and a few screenshots. All of this starts in one file.

That file is app.json, called the app config. Think of it like the label on a bottle of water. The water is your code. The label says the brand name, shows the logo, and has a barcode that is never reused. Your code does not change. Only the label does.

{
"expo": {
"name": "Daily Habits",
"slug": "daily-habits",
"icon": "./assets/images/icon.png",
"android": { "package": "com.nusratdev.habits" }
}
}
  • name is the name under the icon on the home screen.
  • slug is a short id for your project on expo.dev. People never see it.
  • icon is the picture. The Expo docs say 1024x1024 PNG is a good size, and it must be exactly square.
  • android.package is the barcode. It is your app's id on Google Play, like com.nusratdev.habits. Small letters, numbers and _, separated by dots. Pick it once, carefully. After you publish, never change it. The Android docs say Play treats a new package as a completely different app.

Android phones cut icons into different shapes: a circle on one phone, a rounded square on another. So Android uses an adaptive icon: a front layer (your logo) on top of a back layer (a colour). In app.json this is android.adaptiveIcon with foregroundImage and backgroundColor. The Android docs say each layer is 108x108 dp, and only the middle 66x66 dp is always safe from cutting. So keep your logo small and in the centre, with empty space around it.

The splash screen is the picture shown for a moment while the app opens. In current Expo SDKs you set it with the expo-splash-screen plugin in app.json: an image, an imageWidth and a backgroundColor. Expo Go shows its own icon here, so the docs say to check your splash screen in a real build, which you make in the next topic.

Screenshots come from your own phone. Open the app, add three real habits, and take screenshots of your best screens. Google Play has rules for them (as of October 2026): JPEG or PNG without transparency, each side between 320 and 3840 pixels, and the long side can't be more than twice the short side.

People often upload phone screenshots straight from a modern phone. Many phones today make screenshots like 1080x2400. That is more than twice as tall as it is wide, so Play refuses it. Crop it to 1080x1920 (9:16), or place it on a 1080x1920 background in Figma or Canva.

When you read an app.json, look for four things: the name people will see, an android.package you are happy to keep forever, icon files that really exist at those paths, and an adaptive icon with a background colour that matches your logo.

Words to recognise
app.jsonapp configslugandroid.packageiconadaptive iconsplash screenscreenshotaspect ratio