{"id":3712,"date":"2021-06-16T19:31:22","date_gmt":"2021-06-16T19:31:22","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3712"},"modified":"2021-06-18T21:39:35","modified_gmt":"2021-06-18T21:39:35","slug":"how-to-change-your-ios-app-icon-with-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor","title":{"rendered":"How to change your iOS App icon with Capacitor"},"content":{"rendered":"

This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy<\/a>. Simon also created the Practical Ionic<\/a> book, a guide to building real world Ionic applications with Capacitor and Firebase.<\/p>\n

You have heard that Capacitor<\/a> makes it easy to access native device functionality with a simplified API \u2014 but does it really work for core native functionalities like changing the app icon on your home screen?<\/p>\n

In this tutorial we will implement the functionality to switch your app icon on iOS using one of the Capacitor community plugins<\/a>, created by John Borges<\/a>, a member of our community!<\/p>\n

<\/p>\n

\"Capacitor

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<\/em>).<\/p>\n

However, since Capacitor treats native projects as part of your project’s code<\/strong> which is also checked in to source control, you can easily apply any kind of changes to your native projects to enable native functionalities.<\/p>\n

Setting up an Ionic app with Capacitor<\/h2>\n

If you haven\u2019t used Ionic before, now is the time to set up your environment and install the Ionic CLI<\/a>.<\/p>\n

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<\/a>:<\/p>\n

ionic start capacitorIcon blank --type=angular --capacitor\ncd .\/capacitorIcon\nionic capacitor add ios\n\nnpm install @capacitor-community\/app-icon\n<\/code><\/pre>\n
Since we need some icons to test this functionality, go ahead and create icons with your favourite image editing tool (I usually use Canva<\/a> to easily create images) and use the size 1024×1024<\/strong>.<\/p>\n
You should have at least two because one of them will be the default icon of our app.<\/p>\n
To generate the icons (and optional splashscreens<\/em>) for your Capacitor application, you can now use the cordova-res<\/a> package as well. Sounds like a Cordova plugin but works fine for Capacitor!<\/p>\n
Now all you need to do is place one of your created icons inside a resources<\/strong> folder at the root of your Ionic app, then install the package globally if you haven\u2019t and run the according command to generate icons for iOS:<\/p>\n
# If not yet installed\nnpm install -g cordova-res\n\n# Create only icons within a Capacitor project\ncordova-res ios --skip-config --copy --type icon\n<\/code><\/pre>\n
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<\/strong> which is only available in Cordova projects.<\/p>\n
Adding icons to your iOS platform<\/h2>\n
To use alternative icons we need to let our iOS app know about them and include them in the native app bundle.<\/p>\n
We can achieve this by first adding a new folder inside Xcode, so go ahead and open it by running:<\/p>\n
npx cap open ios\n<\/code><\/pre>\n
Inside your project, expand the topmost App<\/strong> element, click on the app folder below it and select New Group<\/strong>. I\u2019ve named this group alternative-icons<\/strong>.<\/p>\n
Once you\u2019ve done this, you can simply drag your previously created icons onto that folder<\/strong> and select to copy them into it like in the image below.<\/p>\n
\"Add
You can use the standard 1024×1024 icons here, no need to generate all the different sizes with the Cordova command again. That\u2019s only necessary for your main app icon; these alternative icons just need to be available in the highest resolution<\/strong> and iOS will handle the rest.<\/p>\n
Once you have your icons inside Xcode, we also need to reference them inside the Info.plist<\/strong> of your project. You can open that file either from Xcode or your preferred IDE.<\/p>\n
Tip: If you want to edit the file directly in Xcode, right click it and select Open as<\/strong> and then Source Code<\/strong>. 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:<\/p>\n
\"Xcode
Wherever you open it, include a new block inside the dictionary that looks like this:<\/p>\n
<dict>\n        <key>CFBundleAlternateIcons<\/key>\n        <dict>\n            <!-- name which will be used for reference -->\n            <key>light<\/key>\n            <dict>\n                <key>UIPrerenderedIcon<\/key>\n                <true\/>\n                <key>CFBundleIconFiles<\/key>\n                <array>\n                    <!-- actual file name of the icon -->\n                    <string>light<\/string>\n                <\/array>\n            <\/dict>\n            <key>wild<\/key>\n            <dict>\n                <key>UIPrerenderedIcon<\/key>\n                <true\/>\n                <key>CFBundleIconFiles<\/key>\n                <array>\n                    <string>wild<\/string>\n                <\/array>\n            <\/dict>\n        <\/dict>\n<\/dict>\n<\/code><\/pre>\n
There are two blocks for alternative icons: each has a key<\/strong> by which you will later select the icon, and an array with the actual name of the icon file<\/strong>.<\/p>\n
In my case I added two icons called light.png<\/strong> and wild.png<\/strong> to my Xcode project previously, and I\u2019m now able to access them under those keys within the code of our app.<\/p>\n
Using the Capacitor plugin<\/h2>\n
The setup is done and we can focus back on our Ionic app. In fact, there\u2019s not much to do in here besides creating a little UI to display our icons and change them through the plugin.<\/p>\n
Let\u2019s start with the TS code. We can perform a few different functions on our plugin in order to show what\u2019s going on:
\n* getName()<\/code> will return the name of the selected alternative icon or null
\n* isSupported()<\/code> can be called to check if the icon switching functionality is available on your platform
\n* change()<\/code> is used to set an alternative icon by its identifier (the one from the plist!)
\n* reset()<\/code> will reset our icon to the default initial app icon<\/p>\n
Inside our src\/app\/home\/home.page.ts<\/strong> 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:<\/p>\n
import { Component } from '@angular\/core';\nimport { AppIcon } from '@capacitor-community\/app-icon';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n  icons = [\n    'wild', 'light'\n  ];\n  selected = '';\n\n  constructor() {\n    this.loadCurrentIcon();\n  }\n\n  async loadCurrentIcon() {\n    let currentIcon = await AppIcon.getName();\n    this.selected = currentIcon.value;\n  }\n\n  async setIcon(name: string) {\n    const isSupported = await AppIcon.isSupported();\n\n    if (isSupported.value) {\n      await AppIcon.change({name: name, suppressNotification: false});\n      this.loadCurrentIcon();\n    }\n  }\n\n  async reset() {\n    await AppIcon.reset({suppressNotification: true});\n    this.loadCurrentIcon();\n  }\n}\n<\/code><\/pre>\n
To display a preview of the icons I also added them to the assets\/icon<\/strong> folder of our Ionic app.<\/p>\n
Now we can iterate our small array, display a thumbnail for each alternative icon, and call the setIcon()<\/code> function to change to that icon.<\/p>\n
Go ahead and change the src\/app\/home\/home.page.html<\/strong> to this now:<\/p>\n
<ion-header>\n  <ion-toolbar color="primary">\n    <ion-title>\n      Capacitor Icons\n    <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content class="ion-padding-top">\n  <ion-list>\n    <ion-item button *ngFor="let icon of icons" (click)="setIcon(icon)" detail="false">\n      <ion-thumbnail slot="start">\n        <img [src]="'.\/assets\/icon\/' + icon + '.png'">\n      <\/ion-thumbnail>\n      <ion-label>\n        Select {{ icon }} icon!\n      <\/ion-label>\n      <ion-icon name="checkmark" slot="end" *ngIf="selected == icon"><\/ion-icon>\n    <\/ion-item>\n  <\/ion-list>\n  <ion-button expand="full" (click)="reset()" class="ion-margin-top">Reset to original icon<\/ion-button>\n<\/ion-content>\n<\/code><\/pre>\n
We can even display which icon is selected since we are able to get the name of the active icon from code!<\/p>\n
Now deploy the app to your device by using the new Capacitor run command<\/strong> or use the live reload command to quickly change things on the fly:<\/p>\n
# New run command\nnpx cap run ios\n\n# or use live reload\nionic cap run ios --livereload --external --source-map=false\n<\/code><\/pre>\n
Important<\/strong>: Make sure that you select your team inside Xcode from the Signing & Capabilities<\/strong> tab to make both of these commands work. Deploying an app to a real device requires signing and an active iOS developer program membership.<\/p>\n
Now go ahead and switch icons as you wish and find the perfect icons for your users!<\/p>\n
Conclusion<\/h2>\n
Even the most native piece of functionality is possible to implement given the way Capacitor treats native projects.<\/p>\n
You don\u2019t 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.<\/p>\n
And what if there\u2019s no plugin for my needs?<\/em><\/p>\n
Well, creating your own Capacitor plugin<\/a> is really easy these days!<\/p>\n
PS: I\u2019m 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<\/a> and get access to a ton of learning material to boost your Ionic and Capacitor development skills.<\/p>\n
PPS: And don\u2019t forget to subscribe to my YouTube channel<\/a> for fresh Ionic tutorials coming every week!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 \u2014 but does […]<\/p>\n","protected":false},"author":11,"featured_media":3713,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"26","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"508430","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/how-to-change-your-ios-app-icon-with-capacitor\/211181","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[214,151],"class_list":["post-3712","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-app-icon","tag-capacitor"],"acf":[],"yoast_head":"\nHow to change your iOS App icon with Capacitor - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change your iOS App icon with Capacitor\" \/>\n<meta property=\"og:description\" content=\"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 \u2014 but does […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-16T19:31:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-18T21:39:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simon Grimm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@schlimmson\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Grimm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\"},\"author\":{\"name\":\"Simon Grimm\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\"},\"headline\":\"How to change your iOS App icon with Capacitor\",\"datePublished\":\"2021-06-16T19:31:22+00:00\",\"dateModified\":\"2021-06-18T21:39:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\"},\"wordCount\":1172,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg\",\"keywords\":[\"App Icon\",\"Capacitor\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\",\"url\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\",\"name\":\"How to change your iOS App icon with Capacitor - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg\",\"datePublished\":\"2021-06-16T19:31:22+00:00\",\"dateModified\":\"2021-06-18T21:39:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change your iOS App icon with Capacitor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\",\"name\":\"Simon Grimm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"caption\":\"Simon Grimm\"},\"sameAs\":[\"https:\/\/x.com\/schlimmson\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/schlimmson\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to change your iOS App icon with Capacitor - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor","og_locale":"en_US","og_type":"article","og_title":"How to change your iOS App icon with Capacitor","og_description":"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 \u2014 but does […]","og_url":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor","og_site_name":"Ionic Blog","article_published_time":"2021-06-16T19:31:22+00:00","article_modified_time":"2021-06-18T21:39:35+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","type":"image\/jpeg"}],"author":"Simon Grimm","twitter_card":"summary_large_image","twitter_creator":"@schlimmson","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Simon Grimm","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor"},"author":{"name":"Simon Grimm","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6"},"headline":"How to change your iOS App icon with Capacitor","datePublished":"2021-06-16T19:31:22+00:00","dateModified":"2021-06-18T21:39:35+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor"},"wordCount":1172,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","keywords":["App Icon","Capacitor"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor","url":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor","name":"How to change your iOS App icon with Capacitor - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","datePublished":"2021-06-16T19:31:22+00:00","dateModified":"2021-06-18T21:39:35+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/how-to-change-your-ios-app-icon-with-capacitor#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How to change your iOS App icon with Capacitor"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6","name":"Simon Grimm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","caption":"Simon Grimm"},"sameAs":["https:\/\/x.com\/schlimmson"],"url":"https:\/\/ionic.io\/blog\/author\/schlimmson"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/06\/rami-al-zayat-w33-zg-dNL4-unsplash-scaled.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3712"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3712\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3713"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}