Skip to content

Commit cb0dec6

Browse files
erisuerisu
authored
doc: create 13.x-2025.11 snapshot (#1449)
1 parent 30df122 commit cb0dec6

File tree

50 files changed

+17509
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+17509
-1
lines changed

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
12.x-2025.01
1+
13.x-2025.11

‎www/_data/toc/en_13-x-2025-11-src.yml‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
-
2+
name: Getting Started
3+
children:
4+
- url: guide/overview/index.html
5+
- url: guide/cli/installation.html
6+
- url: guide/cli/index.html
7+
8+
-
9+
name: Cordova Projects
10+
children:
11+
- url: guide/overview/project-structure.html
12+
- url: reference/cordova-cli/index.html
13+
- url: guide/support/index.html
14+
- url: platform_pinning/index.html
15+
- url: platform_plugin_versioning_ref/index.html
16+
- url: guide/appdev/hooks/index.html
17+
18+
-
19+
name: App Development
20+
children:
21+
-
22+
name: Platforms
23+
children:
24+
- url: guide/platforms/android/index.html
25+
- url: guide/platforms/ios/index.html
26+
- url: guide/platforms/electron/index.html
27+
-
28+
name: Customization
29+
children:
30+
- url: config_ref/images.html
31+
- url: core/features/splashscreen/index.html
32+
-
33+
name: Security & Privacy
34+
children:
35+
- url: guide/appdev/security/index.html
36+
- url: guide/appdev/privacy/index.html
37+
- url: guide/appdev/allowlist/index.html
38+
- url: cordova/storage/storage.html
39+
40+
-
41+
name: Plugin Development
42+
children:
43+
- url: guide/hybrid/plugins/index.html
44+
-
45+
name: Support a Platform
46+
children:
47+
- url: guide/platforms/android/plugin.html
48+
- url: guide/platforms/ios/plugin.html
49+
- url: plugin_ref/plugman.html
50+
51+
-
52+
name: References
53+
children:
54+
- url: config_ref/index.html
55+
- url: plugin_ref/spec.html
56+
- url: cordova/events/events.html
57+
58+
-
59+
name: Resources
60+
children:
61+
- url: third-party/index.html
62+
- url: guide/cli/template.html
63+
- url: guide/next/index.html
64+
65+
-
66+
name: Plugins
67+
children:
68+
- url: reference/cordova-plugin-battery-status/index.html
69+
- url: reference/cordova-plugin-camera/index.html
70+
- url: reference/cordova-plugin-device/index.html
71+
- url: reference/cordova-plugin-dialogs/index.html
72+
- url: reference/cordova-plugin-file/index.html
73+
- url: reference/cordova-plugin-geolocation/index.html
74+
- url: reference/cordova-plugin-inappbrowser/index.html
75+
- url: reference/cordova-plugin-media/index.html
76+
- url: reference/cordova-plugin-media-capture/index.html
77+
- url: reference/cordova-plugin-network-information/index.html
78+
- url: reference/cordova-plugin-screen-orientation/index.html
79+
- url: reference/cordova-plugin-splashscreen/index.html
80+
- url: reference/cordova-plugin-statusbar/index.html
81+
- url: reference/cordova-plugin-vibration/index.html
82+
83+
-
84+
name: Advanced Topics
85+
children:
86+
- url: guide/hybrid/webviews/index.html

‎www/docs/en/13.x-2025.11/config_ref/images.md‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
---
2+
license: >
3+
Licensed to the Apache Software Foundation (ASF) under one
4+
or more contributor license agreements. See the NOTICE file
5+
distributed with this work for additional information
6+
regarding copyright ownership. The ASF licenses this file
7+
to you under the Apache License, Version 2.0 (the
8+
"License"); you may not use this file except in compliance
9+
with the License. You may obtain a copy of the License at
10+
11+
http://www.apache.org/licenses/LICENSE-2.0
12+
13+
Unless required by applicable law or agreed to in writing,
14+
software distributed under the License is distributed on an
15+
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
KIND, either express or implied. See the License for the
17+
specific language governing permissions and limitations
18+
under the License.
19+
20+
title: Customize App Icons
21+
toc_title: Icons
22+
description: Learn how to customize icons for your Cordova application.
23+
---
24+
25+
{% cdv_platform inject %}
26+
27+
# Icons
28+
29+
This section shows how to configure an application's icon for various platforms. Documentation about splash screen images can be found in the Cordova-Plugin-Splashscreen documentation [Splashscreen plugin docs][splashscreen_plugin].
30+
31+
## Configuring Icons in the CLI
32+
33+
When working in the CLI you can define application icon(s) via the `<icon>` element (`config.xml`).
34+
If you do not specify an icon, the Apache Cordova logo is used.
35+
36+
```xml
37+
<icon src="res/ios/icon.png" platform="ios" width="57" height="57" />
38+
```
39+
40+
Attributes | Description
41+
--------------|--------------------------------------------------------------------------------
42+
src | *Required* <br/> Location of the image file, relative to your project directory.
43+
platform | *Optional* <br/> Target platform
44+
width | *Optional* <br/> Icon width in pixels
45+
height | *Optional* <br/> Icon height in pixels
46+
target | *Optional* <br/> {% cdv_platform electron %} <br/> Set target to supply unique icons for `app` and `installer`
47+
48+
## Android
49+
50+
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.
51+
52+
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.
53+
54+
Attributes | Description
55+
--------------|--------------------------------------------------------------------------------
56+
background | *Required for Adaptive* <br/> Location of the image (png or vector) relative to your project directory, or color reference
57+
foreground | *Required for Adaptive* <br/> Location of the image (png or vector) relative to your project directory, or color reference
58+
monochrome | *Optional for Adaptive but required for themed icons* <br/> Location of the image (png or vector) relative to your project directory
59+
density | *Required* <br/> Specified icon density
60+
61+
### Adaptive Icons
62+
63+
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.
64+
65+
#### Adaptive Icon with Images:
66+
67+
```xml
68+
<platform name="android">
69+
<icon monochrome="res/icon/android/ldpi-monochrome.png" background="res/icon/android/ldpi-background.png" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
70+
<icon monochrome="res/icon/android/mdpi-monochrome.png" background="res/icon/android/mdpi-background.png" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
71+
<icon monochrome="res/icon/android/hdpi-monochrome.png" background="res/icon/android/hdpi-background.png" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
72+
<icon monochrome="res/icon/android/xhdpi-monochrome.png" background="res/icon/android/xhdpi-background.png" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
73+
<icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="res/icon/android/xxhdpi-background.png" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
74+
<icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="res/icon/android/xxxhdpi-background.png" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
75+
</platform>
76+
```
77+
78+
**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.
79+
80+
#### Adaptive Icon with Vectors:
81+
82+
```xml
83+
<platform name="android">
84+
<icon monochrome="res/icon/android/ldpi-monochrome.png" background="res/icon/android/ldpi-background.xml" density="ldpi" foreground="res/icon/android/ldpi-foreground.xml" src="res/android/ldpi.png" />
85+
<icon monochrome="res/icon/android/mdpi-monochrome.png" background="res/icon/android/mdpi-background.xml" density="mdpi" foreground="res/icon/android/mdpi-foreground.xml" src="res/android/mdpi.png" />
86+
<icon monochrome="res/icon/android/hdpi-monochrome.png" background="res/icon/android/hdpi-background.xml" density="hdpi" foreground="res/icon/android/hdpi-foreground.xml" src="res/android/hdpi.png" />
87+
<icon monochrome="res/icon/android/xhdpi-monochrome.png" background="res/icon/android/xhdpi-background.xml" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.xml" src="res/android/xhdpi.png" />
88+
<icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="res/icon/android/xxhdpi-background.xml" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.xml" src="res/android/xxhdpi.png" />
89+
<icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="res/icon/android/xxxhdpi-background.xml" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.xml" src="res/android/xxxhdpi.png" />
90+
</platform>
91+
```
92+
93+
**Note:** In this example, the src attribute must be defined when then foreground attribute is defined with a vector or color.
94+
95+
#### Adaptive Icon with Colors:
96+
97+
Create a `res/values/colors.xml` resource file in your project directory to store the app's color definitions.
98+
```xml
99+
<?xml version="1.0" encoding="utf-8"?>
100+
<resources>
101+
<color name="background">#FF0000</color>
102+
</resources>
103+
```
104+
105+
In the `config.xml`, we will add `resource-file` to copy the `colors.xml` into the approprate location so that the colors are available during build time.
106+
107+
```xml
108+
<platform name="android">
109+
<resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />
110+
111+
<icon monochrome="res/icon/android/ldpi-monochrome.png" background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
112+
<icon monochrome="res/icon/android/mdpi-monochrome.png" background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
113+
<icon monochrome="res/icon/android/hdpi-monochrome.png" background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
114+
<icon monochrome="res/icon/android/xhdpi-monochrome.png" background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
115+
<icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
116+
<icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
117+
</platform>
118+
```
119+
120+
### Standard Icons
121+
122+
```xml
123+
<platform name="android">
124+
<!--
125+
ldpi : 36x36 px
126+
mdpi : 48x48 px
127+
hdpi : 72x72 px
128+
xhdpi : 96x96 px
129+
xxhdpi : 144x144 px
130+
xxxhdpi : 192x192 px
131+
-->
132+
<icon src="res/android/ldpi.png" density="ldpi" />
133+
<icon src="res/android/mdpi.png" density="mdpi" />
134+
<icon src="res/android/hdpi.png" density="hdpi" />
135+
<icon src="res/android/xhdpi.png" density="xhdpi" />
136+
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
137+
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
138+
</platform>
139+
```
140+
141+
**See Also:**
142+
143+
- [Android icon guide](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive)
144+
- [Android Adaptive icons - User theming](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#user-theming)
145+
- [Android - Supporting multiple screens](https://developer.android.com/guide/practices/screens_support.html)
146+
147+
## Browser
148+
Icons are not applicable to the Browser platform.
149+
150+
## iOS
151+
152+
```xml
153+
<platform name="ios">
154+
<!-- Notifications on iPhone, iPad Pro, iPad, iPad mini -->
155+
<icon src="res/ios/[email protected]" width="76" height="76" />
156+
<icon src="res/ios/[email protected]" width="114" height="114" />
157+
158+
<!-- Settings on iPhone, iPad Pro, iPad, iPad mini -->
159+
<icon src="res/ios/[email protected]" width="29" height="29" />
160+
<icon src="res/ios/[email protected]" width="58" height="58" />
161+
<icon src="res/ios/[email protected]" width="87" height="87" />
162+
163+
<!-- Spotlight on iPhone, iPad Pro, iPad, iPad mini -->
164+
<icon src="res/ios/[email protected]" width="40" height="40" />
165+
<icon src="res/ios/[email protected]" width="80" height="80" />
166+
167+
<!-- Home Screen on iPad, iPad mini -->
168+
<icon src="res/ios/[email protected]" width="152" height="152" />
169+
170+
<!-- Home Screen on iPad Pro -->
171+
<icon src="res/ios/[email protected]" width="167" height="167" />
172+
173+
<!-- Home Screen on iPhone -->
174+
<icon src="res/ios/[email protected]" width="60" height="60" />
175+
<icon src="res/ios/[email protected]" width="120" height="120" />
176+
<icon src="res/ios/[email protected]" width="180" height="180" />
177+
178+
<!-- macOS app icons -->
179+
<icon src="res/ios/icon-16.png" width="16" height="16" />
180+
<icon src="res/ios/icon-32.png" width="32" height="32" />
181+
<icon src="res/ios/icon-64.png" width="64" height="64" />
182+
<icon src="res/ios/icon-128.png" width="128" height="128" />
183+
<icon src="res/ios/icon-256.png" width="256" height="256" />
184+
<icon src="res/ios/icon-512.png" width="512" height="512" />
185+
186+
<!-- App Store Icon and another macOS app icons -->
187+
<icon src="res/ios/icon-1024.png" width="1024" height="1024" />
188+
</platform>
189+
```
190+
191+
**Notes:**
192+
193+
- Alpha channel is not supported for any iOS icons.
194+
195+
**References:**
196+
197+
- [Apple Developer - Configuring your app icon](https://developer.apple.com/documentation/xcode/configuring-your-app-icon/)
198+
- [Apple Developer - Human Interface Guidelines > App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons)
199+
200+
[splashscreen_plugin]: ../reference/cordova-plugin-splashscreen/
201+
202+
## Electron
203+
204+
### Customizing the Application's Icon
205+
206+
Customized icon(s) can be declared with the `<icon>` element(s) in the `config.xml` file. There are two types of icons that can be defined, the application icon and the package installer icon. These icons should be defined in the Electron's platform node `<platform name="electron">`.
207+
208+
One icon can be used for the application and installer, but this icon should be at least **512x512** pixels to work across all operating systems.
209+
210+
_Notice: If a customized icon is not provided, the Apache Cordova default icons are used._
211+
212+
_Notice: macOS does not display custom icons when using `cordova run`. It defaults to the Electron's icon._
213+
214+
```xml
215+
<platform name="electron">
216+
<icon src="res/electron/icon.png" />
217+
</platform>
218+
```
219+
220+
You can supply unique icons for the application and installer by setting the `target` attribute. As mentioned above, the installer image should be **512x512** pixels to work across all platforms.
221+
222+
```xml
223+
<platform name="electron">
224+
<icon src="res/electron/app.png" target="app" />
225+
<icon src="res/electron/installer.png" target="installer" />
226+
</platform>
227+
```
228+
229+
For devices that support high-DPI resolutions, such as Apple's Retina display, you can create a set of images with the same base filename but suffix with its multiplier.
230+
231+
For example, if the base image's filename `icon.png` and is the standard resolution, then `[email protected]` will be treated as a high-resolution image that with a DPI doubled from the base.
232+
233+
- icon.png (256px x 256px)
234+
- [email protected] (512px x 512px)
235+
236+
If you want to support displays with different DPI densities at the same time, you can put images with different sizes in the same folder and use the filename without DPI suffixes. For example:
237+
238+
```xml
239+
<platform name="electron">
240+
<icon src="res/electron/icon.png" />
241+
<icon src="res/electron/[email protected]" />
242+
<icon src="res/electron/[email protected]" />
243+
<icon src="res/electron/[email protected]" target="installer" />
244+
</platform>
245+
```

0 commit comments

Comments
 (0)