We can achieve this by first adding a new folder inside Xcode, so go ahead and open it by running: npx cap open ios To use alternative icons we need to let our iOS app know about them and include them in the native app bundle. By skipping the config we tell the tool to not write to a config.xml which is only available in Cordova projects. We are not interested in creating the splash screen right now so we use the type icon. # Create only icons within a Capacitor projectĬordova-res ios -skip-config -copy -type icon
Now all you need to do is place one of your created icons inside a resources folder at the root of your Ionic app, then install the package globally if you haven’t and run the according command to generate icons for iOS: # If not yet installed Sounds like a Cordova plugin but works fine for Capacitor! To generate the icons ( and optional splashscreens) for your Capacitor application, you can now use the cordova-res package as well. You should have at least two because one of them will be the default icon of our app. Npm install we need some icons to test this functionality, go ahead and create icons with your favourite image editing tool (I usually use Canva to easily create images) and use the size 1024×1024. Once the app is ready we can add our iOS platform and then install the App icon plugin: ionic start capacitorIcon blank -type=angular -capacitor Now we begin by creating a blank new Ionic application with Capacitor enabled. If you haven’t used Ionic before, now is the time to set up your environment and install the Ionic CLI.
However, since Capacitor treats native projects as part of your project’s code which is also checked in to source control, you can easily apply any kind of changes to your native projects to enable native functionalities. To change your icon you need to apply changes to your native iOS project, which was always challenging with Cordova and required some magic to make it work ( free frustration included). In this tutorial we will implement the functionality to switch your app icon on iOS using one of the Capacitor community plugins, created by John Borges, a member of our community! You have heard that Capacitor makes it easy to access native device functionality with a simplified API - but does it really work for core native functionalities like changing the app icon on your home screen? Simon also created the Practical Ionic book, a guide to building real world Ionic applications with Capacitor and Firebase. If you need help to use the tool, or you have suggestions to improve it, write a comment here or send me an e-mail.This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy. Then, if you feel generous, you can buy me a coffee going here: Buy me a coffee. If you want, it would be nice if you could share this article and talk about Use it as mush as you like, for all the times you need. Yes, it’s right…the tool is completely free.
In just a second you will have all the 8 icons resized for your Android and iOS project. Now press the “Download” button to download your icons. If you want you can change the name of your icons. , it will require just few seconds.ĭrag your icon over the grey box with the text: “Drag and drop your icon here”. The process can be quite laborious and long but thanks to Under iOS, you should have 3 icons for each image with the names written with this logic: In android you should create 5 icons for each image and they should go under these folder: As you know, you shouldn’t have a single size icon but you should have different sizes according to the phone/tablet screen. allows you to generate also the icons for your UI elements (buttons, tabs…). Thanks to, the process of creating the icons for your Android and iOS project will take only few seconds. The iOS icons contain also the Contents.json file so if you copy the icons and this file inside your Assets.xcassets folder, Xamarin (or xcode) will automatically recognize all the icons for the different sizes (so cool!).
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. App iconĭrag your icon over the grey box with the text: “Drag and drop your icon here”. The app icons generator, allow to generate the icon for your app and all the icon set for the button, tabs and other UI components.
Xamarin eXpert is proud to present you a new amazing tool to create the icons for your apps for free and with a single click of your mouse: How it works