In this guide you will find more details on how to prepare the following graphics:
- Splash screen
- App icon
- Notification icon
- Featured image
The app icon and splash screen are important aspects of apps, they are the first two things a user will see after installing your app.
Below you will find instructions and tips on how to prepare the graphics for your Canvas app.
Before you start, make sure you have a good quality version of your logo to work with, this will drastically improve the final graphics for your app.
What is a high-quality version of my logo?
A high-quality version of your logo means that it allows it to be resized without losing quality, below you will find the two most common cases:
Source files as vector
If you have the source file for your logo in .ai, .svg, .cdr, .pdf, it means that you can easily increase its size without losing any quality, this is the ideal scenario
Good quality and big size
Alternatively, you might only have your logo in .png or .jpeg, which is fine, but in these cases, your logo will need to be at least 1000x1000px in size, so we can resize it with minimal quality loss.
I don't have any of these :(
In this case, our recommendation would be for you to have a designer assist with preparing a vectorized version of your logo, which will allow you to apply your brand in different scenarios with a more professional and better quality look.
If your logo consists of a simple font, you can then provide the font files to our team and we will try to work with it to prepare the graphics.
Below you can see the difference that a high-quality graphic can make in your app:
Splash screen background
The splash screen for your app consists of two graphics, the logo, and the background, which will be placed one over the other in the final version, as you can see below:
It is important to keep in mind that your background will get cropped depending on the device size in which your app is installed, so you definitely don't want to use text or anything that can't be cropped in your background.
The background image must be 2048x2048px in size, no transparencies, in .png or .jpeg format.
Splash screen logo
Your logo will be placed over the background, it must be 1000x1000px in size, with a transparent background, in .png format.
Note that although the file size is required to be 1000x1000px in size, your logo should be centered and have some bleeding on the sides, to make sure your logo won't touch the edges of the device.
See the images below for reference:
App icon Android
When preparing the icons for your apps you need to keep in mind that the app icon will be displayed in a small size, so depending on how your logo looks like you will want to use a reduced or minimalistic version of your logo, which will fit much better into the icon, see below:
For Android specifically, you will need to provide 2 different files for the app icon, similarly to what you did for the splash screen.
App icon logo
The app icon logo must be 512x512px in size with a transparent background, in .png format, with some padding on the sides.
You can see an example below:
App icon background
The app icon background must also be 512x512px in size, with no transparencies, in .png format, you can see an example below:
App icon for the Play Store
You will also need to provide a separate version of your app icon, with your background and logo merged into a single file, this graphic will be used in the Play Store.
The Play Store app icon must be 512x512px in size, no transparencies, in .png format, here is an example:
App icon iOS
The iOS app icon consists of a single file, with 1024x1024px in size, no transparencies, in .png format.
For iOS keep in mind that the icon will be automatically rounded by Apple, so you will want to make sure that you have some padding on the sides to avoid having elements getting cropped.
Here you can see an example:
Push notification icon for Android
Android allows you to customize the icon that is displayed on the user's device when a notification is received.
Just like with the app icon you will want to use a minimalistic version of your logo, since the push icon is displayed in very small sizes.
The file must be at least 200x200px in size, with a transparent background, in .png format.
You will then need to upload your file to the Android Asset Studio tool, which you can find clicking here.
Here you can see a quick video of how that process looks like: