Now press the “Download” button to download your icons.Īfter extracting the zip file, you can simply copy the Android icons in your Android project and the iOS icons in your iOS project.įor Android there are 5 resolutions that you should consider and so in your project there are 5 folder (one for each resolution): This is why it's so important to create an icon set to adapt a single icon to the different screen size of Android and iOS screens.ĭrag your icon over the grey box with the text: “Drag and drop your icon here”. You could create a single icon but then you'll consume more memory that you should or you'll create a lower image than you should. png files through the file system, edit them, and resave them with your desired splash screen.As you know, there are many Android and iOS devices, each of them with a different screen size and available memory. Since there are only three images here, it's actually also quite easy to just open up the.
You should take the same approach here – either update the images in the file system or drag your new splash screen into the XCode interface. You would have also seen a Splash entry under Assets.xcassets, and you can also reveal these files in your file system by right-clicking on Splash. Supplying the launch images is basically the same as the icons. If you are going this route then it may just be easier to drag and drop into the XCode interface so you don't need to worry about messing with the Contents.json file. If you don't have a Contents.json file you would either need to replace each icon making sure to keep the same name and size, or update the existing Contents.json to reflect the new file. If you used a tool that generates the Contents.json file for you as well as the icons, then you can just replace everything in this folder with your new icon set. As you can see from the image below, I have replaced all of the icon assets with my own icon: Navigate to App > App > Assets.xcassets and you will be able to see the splash and icon assets for your project. Open up your Capacitor project in XCode: npx cap open ios First, let's find where the existing icons live. There are a couple of ways we can approach adding iOS icons to a project. At this point, I will assume that you already have a Capacitor project created and have added your desired platforms, e.g: npx cap add ios npx cap add android iOS Icons Now, let's move on to adding the assets to a Capacitor project. For this example, I used MakeAppIcon for the iOS icons, ImageGorilla for the Android splash screens, I generated the iOS splash screens manually (as I was just using a universal size), and I had Android Studio create the Android icons for me automatically. These are just a few of the options available.
SplashScreen Pro – this is a paid tool but integrates directly with Photoshop or Sketch.ImageGorilla – creates icons and splash screens for iOS and Android (but some formats are missing).MakeAppIcon – great for creating iOS icons, but doesn't create splash screens or Android assets.Just create every requires icon and splash screen size manually.Depending on your workflow and preferences you will probably prefer using different tools and methods, here are some options: I suspect this will change in the future but it's a little awkward to use right now. There is a command built directly into the Ionic CLI to help generate resources, but at the moment this requires Cordova integration with your project. There are quite a few tools out there to help with this task. You may still want to use a tool to generate splash screens for Android, though.
It is going to be a little easier for Android because we can use Android Studio to automatically generate and set up the icons for us, so we don't need an external tool to help us with this. If you are interested in seeing the variously sized assets we require for iOS, you can check out the documentation: Icons | Launch Screens. As I mentioned, there are a lot of different sizes/resolutions we need to cater for, so it is often easier to use some kind of tool to help us create these assets. The first step is to prepare the assets that we will be using for our icons and splash screens. Generating the Icon and Splash Screen Assets