From 5d27efc16f008a21e774305b309f658df0ae4635 Mon Sep 17 00:00:00 2001 From: Erisu Date: Wed, 19 Mar 2025 22:07:56 +0900 Subject: [PATCH 1/3] doc(ios): refactor app icons --- www/docs/en/dev/config_ref/images.md | 73 ++++++++++++++++------------ 1 file changed, 42 insertions(+), 31 deletions(-) diff --git a/www/docs/en/dev/config_ref/images.md b/www/docs/en/dev/config_ref/images.md index 311bc8ce53..b967d3911d 100644 --- a/www/docs/en/dev/config_ref/images.md +++ b/www/docs/en/dev/config_ref/images.md @@ -152,43 +152,54 @@ In the `config.xml`, we will add `resource-file` to copy the `colors.xml` into t Icons are not applicable to the Browser platform. ## iOS + ```xml - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ``` -### See Also -- [App Icons on iPad and iPhone](https://developer.apple.com/library/content/qa/qa1686/_index.html) + +**Notes:** + +- Alpha channel is not supported for any iOS icons. + +**References:** + +- [Apple Developer - Configuring your app icon](https://developer.apple.com/documentation/xcode/configuring-your-app-icon/) +- [Apple Developer - Human Interface Guidelines > App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons) [splashscreen_plugin]: ../reference/cordova-plugin-splashscreen/ From 819a036c805822b9fed807a875789d931a880bfd Mon Sep 17 00:00:00 2001 From: Erisu Date: Wed, 19 Mar 2025 22:21:49 +0900 Subject: [PATCH 2/3] doc(android): refactor app icons --- www/docs/en/dev/config_ref/images.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/www/docs/en/dev/config_ref/images.md b/www/docs/en/dev/config_ref/images.md index b967d3911d..3229a370aa 100644 --- a/www/docs/en/dev/config_ref/images.md +++ b/www/docs/en/dev/config_ref/images.md @@ -55,9 +55,9 @@ different screen resolutions. ## Android -Instead of using a single image for an icon, you can use two images (background and foreground) to create an **Adaptive Icon**. To use Adaptive Icons in Cordova, at minimum **Cordova CLI** 9.0.0 and **Cordova-Android** 8.0.0 is required. +Android's **Adaptive Icons** feature enables you to create separate foreground and background layers for your App Icons. To use Adaptive Icons in Cordova, you need at least **Cordova CLI** 9.0.0 and **Cordova-Android** 8.0.0. -Android 13 has introduced themed icons which are monochrome images appended to the existing **Adaptive Icons**. To use Themed Icon in Cordova, at minimum **Cordova CLI** 12.0.0 and **Cordova-Android** 12.0.0 is required. +With Android 13, Google introduced **Themed Icons**, which are monochrome variations of **Adaptive Icons** that integrate seamlessly with the system's color scheme. To use **Themed Icons** in Cordova, you'll need at least **Cordova CLI** 12.0.0 and **Cordova-Android** 12.0.0. Attributes | Description --------------|-------------------------------------------------------------------------------- @@ -71,6 +71,7 @@ density | *Required*
Specified icon density To use the adaptive icons the `background`, `foreground` and optionally `monochrome` attributes must be defined in place of the `src` attribute. The `src` attribute is not used for adaptive icons. #### Adaptive Icon with Images: + ```xml @@ -85,6 +86,7 @@ To use the adaptive icons the `background`, `foreground` and optionally `monochr **Note:** In this example, the foreground image will also be used as the fallback icon for Android devices that do not support the adaptive icons. The fallback icon can be overridden by setting the src attribute. #### Adaptive Icon with Vectors: + ```xml @@ -99,6 +101,7 @@ To use the adaptive icons the `background`, `foreground` and optionally `monochr **Note:** In this example, the src attribute must be defined when then foreground attribute is defined with a vector or color. #### Adaptive Icon with Colors: + Create a `res/values/colors.xml` resource file in your project directory to store the app's color definitions. ```xml @@ -143,7 +146,8 @@ In the `config.xml`, we will add `resource-file` to copy the `colors.xml` into t ``` -### See Also +**See Also:** + - [Android icon guide](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive) - [Android Adaptive icons - User theming](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#user-theming) - [Android - Supporting multiple screens](https://developer.android.com/guide/practices/screens_support.html) From 577c61764948abbe5edfdcaedc07451e16e50748 Mon Sep 17 00:00:00 2001 From: Erisu Date: Wed, 19 Mar 2025 22:22:10 +0900 Subject: [PATCH 3/3] doc: refactor app icons --- www/docs/en/dev/config_ref/images.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/www/docs/en/dev/config_ref/images.md b/www/docs/en/dev/config_ref/images.md index 3229a370aa..6b71913cd2 100644 --- a/www/docs/en/dev/config_ref/images.md +++ b/www/docs/en/dev/config_ref/images.md @@ -45,14 +45,6 @@ width | *Optional*
Icon width in pixels height | *Optional*
Icon height in pixels target | *Optional*
{% cdv_platform electron %}
Set target to supply unique icons for `app` and `installer` -The following configuration can be used to define a single default icon -which will be used for all platforms. -```xml - -``` -For each platform, you can also define a pixel-perfect icon set to fit -different screen resolutions. - ## Android Android's **Adaptive Icons** feature enables you to create separate foreground and background layers for your App Icons. To use Adaptive Icons in Cordova, you need at least **Cordova CLI** 9.0.0 and **Cordova-Android** 8.0.0.