How to Make an App Icon and App Store Screenshots (w/ video)

If you are searching for this topic, Welcome to the exciting process of publishing your app! This is the final step that takes your app idea to the rest of the world.

You will need 4 graphics if you are publishing to both the Google Play Store and the Apple App Store.

In this tutorial, I show you how I created all of the graphics necessary to publish my Thunkable X app to both the Google Play Store and the Apple App Store.

Graphic #1 - App Icon

Create Your Icon

The app icon is what users will select to open your app. It should be a visual cue to what is found in your app. Go to the app store and look at the top 100 apps in your genre to see what your competitors are using for icons, and then design yours to stand out amongst your competitors.

I recommend using Canva.com to create your app icon.

I used ‘Instagram Post 1080 px x 1080 px’ for the size of my icon. When designing, I added a gradient background along with a single graphic.

Resize Your Icon

After you create your app icon, you will need to resize the icon to use across platforms. Thunkable recommends makeappicon.com for this. The online version of this is free.

After uploading your icon, the software will generate a ton of different image sizes that can be used.

I uploaded ‘Icon-App-83.5x83.5@2x.png’ to Thunkable and ‘playstore-icon.png’ to the Google Play Store.

Graphic #2 - Smartphone Screenshots

After taking screenshots of your app on a smartphone, go to ShotBot.io to make some nice graphics. Choose a free template, upload your screenshots, and then customize the text.

ShotBot says they require a certain screenshot size but don’t be too concerned if your screenshots aren’t big enough. The software will resize them and mine look just fine!

Graphic #3 - Tablet Screenshots (Required by Apple)

Thunkable automatically pushes an iPad version of your app to the Apple App Store. This means you are required to make iPad screenshots as well. Don’t skip this step! My app was initially rejected for this reason.

Since ShotBot doesn’t have templates for tablets, I used AppStoreScreenshot.com to create tablet screenshots. It does not have templates for you to use, but it is more customizable - giving you some creative freedom.

Graphic #4 - Banner Photo (Required by Google)

I used the same icon and screenshots created above for the Google Play Store. However, the Play Store had one extra requirement of a banner photo. I made this in canva!

You are required to use ‘1024px x 500px’ as the dimensions. Beyond that, showcase the best features in your app. This graphic is like an advertisement, so it should entice people to want to check out your app.


Please share any additional tools or resources you like below. :wink:

Happy Coding!

4 Likes

@darren

This is an Amazing tutorial. Please continue with your creations.

Best
Abdul

2 Likes

June 10, 2020 Updates

There are a few updates to the publishing process since this post originated. You can view the details in this video:

The main update is Apple is requiring new size screenshots… and the required sizes will continue to change in the future. Good news is there is a way to create screenshots for any size device. I walkthrough this in the video above, but you can also check out this post for details:

2 Likes

Was watching this this morning and shared it with the rest of the team - thanks for the update @darren, awesome work as usual!

Hey Darren: Great tutorial as always. My question is regarding maps. They do not seem to show up in the Thunkable responsive app on my computer and therefor, I cannot get the screenshot. Anything you or anybody else know, I would appreciate it.

Maps don’t work with the webapps @gpo. You need an actual screenshot from your device (especially for iPhone publishing) . You can do this with an emulator like bluestacks but I’m sure there are others.

Anyway, you should make sure it looks good on a device and not just a responsive app but it looks bad; it won’t be accepted. Then when you make sure it looks fine, just take some screenshots.

Does that make sense?

Yes, thank you Jared. Appreciate it.

1 Like

Hopefully in the future we’ll have the ability to use maps in webapps. Local Positions could be found using I.p. Addresses I believe instead of a gps function.