ionic tutorial - Ionic Splash Screen | Ionic - Cordova Icon & Splash Screen - ionic - ionic development - ionic 2 - ionic framework
- Every mobile app needs icon and splash screen. Ionic provides excellent solution for adding it and requires minimum work for the developers. Cropping and resizing is automated on Ionic server.
- An app icon and splash screen (launch image) are important parts of any app, yet making them used to be incredibly tedious.
- You needed numerous icons for iOS and Android, and then you had to deal with splash screens and all their different sizes.
- To save you the stress of dealing with all that, we’ve made it possible for you to generate app icons and splash screens via the Ionic CLI.
How to add Splash Screen and Icon in Ionic framework
- By adding platform, Ionic will install Cordova splash screen plugin for that platform so we don't need to install anything afterwards. All we need to do is to find two images.
- Images should be png, psd or ai files. Minimum dimension should be 192x192 for icon image and 2208x2208 for splash screen image. This dimension will cover all the devices.
- In our example, we will use the same image for both. The images need to be saved to resources folder instead of default ones. After we are done with it, all we need is to run the following in command prompt window.
cUsers\Username\Desktop\MyApp>ionic resources
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Now if you check resources/android or resources/ios folders you will see that images we added before are resized and cropped to accommodate different screen sizes.
- Now when we run our app on device we will see splash screen before the app is started and we will also see that default Ionic icon is changed.
NOTE
- If you want to use different images for Android and IOS you can add it to resources/android and resources/ios instead of resources folder.