How to change your iOS App icon with Capacitor - Ionic Blog (2023)

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!

How to change your iOS App icon with Capacitor - Ionic Blog (1)

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:

(Video) Ionic 6+ Capacitor - Generate custom Icons & Splashscreens | Android & iOS

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.

(Video) How to Create App icon in Ionic - Capacitor & Android Image Asset Studio

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.

How to change your iOS App icon with Capacitor - Ionic Blog (2)

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:

How to change your iOS App icon with Capacitor - Ionic Blog (3)

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.

(Video) Turn your Ionic App into an iOS App using Capacitor

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!

(Video) Ionic Capacitor Tutorial - Ionic Build Android & Ionic Build iOS

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.

(Video) Ionic Splash Screen and Icon - iOS & Android

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? â€ș

How Do You Change App Icons and Names on Android?
  1. Open Shortcut Maker. Choose the type of shortcut you wish to make from the list. ...
  2. Use the Tap to Edit Label button (it will also show the app name) to change the name. ...
  3. Edit any other custom options you want (you can also choose a custom app icon).
Jun 15, 2021

How do I rename an app in Control Panel? â€ș

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.

Which app is best for Change Icon? â€ș

5 Best Icon Changer Apps For Android To Make Your Phone Look Unique
  • Any Icon.
  • Pure Icon Changer.
  • Icon Changer.
  • Ume Icon Changer.
  • Icon Changer Pro.
Sep 9, 2022

Why can't I change my app icons? â€ș

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.

Videos

1. Ionic 6 Capacitor In-App-Browser Plugin - Running in Android & iOS
(Coding Technyks)
2. How to change spalsh screen and App Icon in Ionic App
(Ganesh Geek)
3. The Push Notifications Guide for Ionic & Capacitor
(Simon Grimm)
4. Ionic Capacitor - Create new App - Run in Android & iOS - Emulator, Simulator, Device - Generate APK
(Coding Technyks)
5. How to use Ionic In App Purchase with Capacitor
(Simon Grimm)
6. Ionic 7.0 RELEASED - New way to Style your App? đŸ˜±
(Simon Grimm)

References

Top Articles
Latest Posts
Article information

Author: Patricia Veum II

Last Updated: 25/09/2023

Views: 5864

Rating: 4.3 / 5 (64 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Patricia Veum II

Birthday: 1994-12-16

Address: 2064 Little Summit, Goldieton, MS 97651-0862

Phone: +6873952696715

Job: Principal Officer

Hobby: Rafting, Cabaret, Candle making, Jigsaw puzzles, Inline skating, Magic, Graffiti

Introduction: My name is Patricia Veum II, I am a vast, combative, smiling, famous, inexpensive, zealous, sparkling person who loves writing and wants to share my knowledge and understanding with you.