This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy. Simon also created the Practical Ionic book, a guide to building real world Ionic applications with Capacitor and Firebase.
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?
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!
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).
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.
Setting up an Ionic app with Capacitor
If you havenât used Ionic before, now is the time to set up your environment and install the Ionic CLI.
Now we begin by creating a blank new Ionic application with Capacitor enabled. Once the app is ready we can add our iOS platform and then install the App icon plugin:
ionic start capacitorIcon blank --type=angular --capacitorcd ./capacitorIconionic capacitor add iosnpm install @capacitor-community/app-icon
Since 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.
You should have at least two because one of them will be the default icon of our app.
To generate the icons (and optional splashscreens) for your Capacitor application, you can now use the cordova-res package as well. Sounds like a Cordova plugin but works fine for Capacitor!
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 installednpm install -g cordova-res# Create only icons within a Capacitor projectcordova-res ios --skip-config --copy --type icon
We are not interested in creating the splash screen right now so we use the type icon. By skipping the config we tell the tool to not write to a config.xml which is only available in Cordova projects.
Adding icons to your iOS platform
To use alternative icons we need to let our iOS app know about them and include them in the native app bundle.
We can achieve this by first adding a new folder inside Xcode, so go ahead and open it by running:
npx cap open ios
Inside your project, expand the topmost App element, click on the app folder below it and select New Group. Iâve named this group alternative-icons.
Once youâve done this, you can simply drag your previously created icons onto that folder and select to copy them into it like in the image below.
You can use the standard 1024Ă1024 icons here, no need to generate all the different sizes with the Cordova command again. Thatâs only necessary for your main app icon; these alternative icons just need to be available in the highest resolution and iOS will handle the rest.
Once you have your icons inside Xcode, we also need to reference them inside the Info.plist of your project. You can open that file either from Xcode or your preferred IDE.
Tip: If you want to edit the file directly in Xcode, right click it and select Open as and then Source Code. Otherwise you get the row layout which is good for an overview but makes adding these keys more complicated. This view makes more sense for editing:
Wherever you open it, include a new block inside the dictionary that looks like this:
<dict> <key>CFBundleAlternateIcons</key> <dict> <!-- name which will be used for reference --> <key>light</key> <dict> <key>UIPrerenderedIcon</key> <true/> <key>CFBundleIconFiles</key> <array> <!-- actual file name of the icon --> <string>light</string> </array> </dict> <key>wild</key> <dict> <key>UIPrerenderedIcon</key> <true/> <key>CFBundleIconFiles</key> <array> <string>wild</string> </array> </dict> </dict></dict>
There are two blocks for alternative icons: each has a key by which you will later select the icon, and an array with the actual name of the icon file.
In my case I added two icons called light.png and wild.png to my Xcode project previously, and Iâm now able to access them under those keys within the code of our app.
Using the Capacitor plugin
The setup is done and we can focus back on our Ionic app. In fact, thereâs not much to do in here besides creating a little UI to display our icons and change them through the plugin.
Letâs start with the TS code. We can perform a few different functions on our plugin in order to show whatâs going on:
* getName()
will return the name of the selected alternative icon or null
* isSupported()
can be called to check if the icon switching functionality is available on your platform
* change()
is used to set an alternative icon by its identifier (the one from the plist!)
* reset()
will reset our icon to the default initial app icon
Inside our src/app/home/home.page.ts we can now call those functions to keep track of the currently selected icon, and to change the icon to something from our array of icons like this:
import { Component } from '@angular/core';import { AppIcon } from '@capacitor-community/app-icon';@Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'],})export class HomePage { icons = [ 'wild', 'light' ]; selected = ''; constructor() { this.loadCurrentIcon(); } async loadCurrentIcon() { let currentIcon = await AppIcon.getName(); this.selected = currentIcon.value; } async setIcon(name: string) { const isSupported = await AppIcon.isSupported(); if (isSupported.value) { await AppIcon.change({name: name, suppressNotification: false}); this.loadCurrentIcon(); } } async reset() { await AppIcon.reset({suppressNotification: true}); this.loadCurrentIcon(); }}
To display a preview of the icons I also added them to the assets/icon folder of our Ionic app.
Now we can iterate our small array, display a thumbnail for each alternative icon, and call the setIcon()
function to change to that icon.
Go ahead and change the src/app/home/home.page.html to this now:
<ion-header> <ion-toolbar color="primary"> <ion-title> Capacitor Icons </ion-title> </ion-toolbar></ion-header><ion-content class="ion-padding-top"> <ion-list> <ion-item button *ngFor="let icon of icons" (click)="setIcon(icon)" detail="false"> <ion-thumbnail slot="start"> <img [src]="'./assets/icon/' + icon + '.png'"> </ion-thumbnail> <ion-label> Select {{ icon }} icon! </ion-label> <ion-icon name="checkmark" slot="end" *ngIf="selected == icon"></ion-icon> </ion-item> </ion-list> <ion-button expand="full" (click)="reset()" class="ion-margin-top">Reset to original icon</ion-button></ion-content>
We can even display which icon is selected since we are able to get the name of the active icon from code!
Now deploy the app to your device by using the new Capacitor run command or use the live reload command to quickly change things on the fly:
# New run commandnpx cap run ios# or use live reloadionic cap run ios --livereload --external --source-map=false
Important: Make sure that you select your team inside Xcode from the Signing & Capabilities tab to make both of these commands work. Deploying an app to a real device requires signing and an active iOS developer program membership.
Now go ahead and switch icons as you wish and find the perfect icons for your users!
Conclusion
Even the most native piece of functionality is possible to implement given the way Capacitor treats native projects.
You donât need to rely on copy hooks or any magic to make things like dynamically changing your app icon work. All you need is a good plugin from the Capacitor community and some changes inside the native platforms of your Capacitor project.
And what if thereâs no plugin for my needs?
Well, creating your own Capacitor plugin is really easy these days!
PS: Iâm also running a full online school for everyone learning Ionic with 60+ video courses, templates and a supportive community â go check out the Ionic Academy and get access to a ton of learning material to boost your Ionic and Capacitor development skills.
PPS: And donât forget to subscribe to my YouTube channel for fresh Ionic tutorials coming every week!
FAQs
How do I change the icon of an iOS app? âș
Tap on the icon under Home Screen Name and Icon. You'll have the choice of either taking a photo, choosing a photo, or choosing a file. Assuming you've already saved an image in Photo, tap on Choose Photo and select the photo you want to use.
Can we change app icon dynamically in iOS? âșiOS gives developers the ability to change their app's icon programmatically, although it takes a little work to set up. It also isn't quite as powerful as you might hope â you can't recreate the moving hands of the Clock app, for example.
How do I change the name of my iOS app capacitor? âșYou can't rename the App directory, but you can set the name of your app by renaming the App target. To rename the App target, open your project in Xcode, select the App project, and double-click the App target. Finally, add the scheme attribute inside the ios object in the Capacitor configuration file.
How do I change app icons on iPhone without Shortcuts? âșThe Launch Center Pro app lets you change iOS app icons without having to use Shortcuts. Apple's latest iOS 14 has given users a chance to customise their home screens with widgets and custom icons.
How do I change app icons on iOS 16 2022? âșTap on the '3 dot' menu in the top-right corner and select 'Add to Home Screen'. Under 'Home screen name and icon' tap on the app icon. Browse and select the new image that you need to set as the icon. After selecting and editing the new icon, press 'Add'.
How do I make custom icons for my iPhone? âșTap Add to Home Screen and select the icon next to your shortcut under Home Screen Name and Icon. In the pop-up window that appears, select File, Photo, or Take Photo. You can crop an image to customize what will show, but happily, the image needn't be square or a specific size. Tap Add > Done.
Will Apple ever allow custom icons? âșUsing custom app icons has become more seamless with iPhone 14 Pro's Dynamic Island. Apple has never officially let users change iOS app icons. However, thanks to the Shortcuts app, anyone can create a home screen shortcut with a custom icon that opens a specific app.
How do I manually change app icons? âșLong-press the app icon you want to change. Tap the pencil button to edit the shortcut. Tap the app icon. Select the icon pack from which you want to apply the icon.
How do you permanently change app icons and names? âș- Open Shortcut Maker. Choose the type of shortcut you wish to make from the list. ...
- Use the Tap to Edit Label button (it will also show the app name) to change the name. ...
- Edit any other custom options you want (you can also choose a custom app icon).
Right-click the application and choose Rename. Enter the new name and press Enter, or click outside of the box to cancel. Note You can also highlight the application in the right pane and press F2.
How do I add custom icons to iOS 15? âș
How to change app icons iOS 15 - Set a glyph icon. Glyphs are ready-made icons for Shortcuts. If you wish to select one, tap the top-left shortcut icon, pick your color, finally the Glyph you'd like to use. Then click 'Done' which will take you back to your Shortcut creation screen.
Where to get aesthetic app icons? âșIf you need more app icons for your iPhone, I recommend visiting Etsy, where you can find a variety of aesthetic app icon packs that include many different apps, widgets, and wallpapers.
Can you rename an app icon? âșTap on the app name. Information about the app shortcut displays in the right pane. Tap the area that says âTap to change labelâ. The âRename shortcutâ dialog box displays.
Can you own an app name? âșYou cannot reserve a name but you can have multiple apps with the same name. So no need to reserve the name â you can definitely use it. Whether or not you want to have the same name as other apps is another questionâŠ
Can you change the Icon of an app? âșTap Apps. Select the app whose icon you want to change. Select Icon from the settings menu that opens. The available icons for that app from the various icon packs installed on your phone appear under the Available Icons section.
How do you disguise an app? âșUse built-in settings to hide apps on Android
First, open Settings, tap Home screen, and scroll to Hide apps. Tap the apps you want to hide, and they'll move to the Hidden apps section.
- Any Icon.
- Pure Icon Changer.
- Icon Changer.
- Ume Icon Changer.
- Icon Changer Pro.
The biggest factor is the default launcher on your phone; the ones included with many Android phones do not support custom icons. This is the case with the Pixel Launcher on Google's first-party phones, for example. The easiest way to change your app icons is by installing and using a new launcher that allows this.
Does Icon themer work on iOS 15? âșDescription. Icon Themer is no longer supported. Apple disapproved of it and killed off our method in iOS 14.5.