图标

本节介绍如何为各种平台配置应用程序的图标。有关启动画面图像的文档可以在 Cordova-Plugin-Splashscreen 文档启动画面插件文档中找到。

在 CLI 中配置图标

在 CLI 中工作时，您可以通过 <icon> 元素 (config.xml) 定义应用程序图标。如果您没有指定图标，则会使用 Apache Cordova 徽标。

    <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

属性	描述
src	必需图像文件的位置，相对于您的项目目录。
platform	可选目标平台
width	可选图标宽度，以像素为单位
height	可选图标高度，以像素为单位
target	可选设置目标以提供 `application` 和 `installer` 的唯一图标

以下配置可用于定义将用于所有平台的单个默认图标。

    <icon src="res/icon.png" />

对于每个平台，您还可以定义一个像素完美的图标集，以适应不同的屏幕分辨率。

Android

您可以使用两个图像（背景和前景）来创建一个自适应图标，而不是使用单个图像作为图标。要在 Cordova 中使用自适应图标，至少需要 Cordova CLI 9.0.0 和 Cordova-Android 8.0.0。

Android 13 引入了主题图标，这些图标是附加到现有自适应图标上的单色图像。要在 Cordova 中使用主题图标，至少需要 Cordova CLI 12.0.0 和 Cordova-Android 12.0.0。

属性	描述
background	自适应图标必需图像（png 或矢量）相对于您的项目目录的位置，或颜色引用
foreground	自适应图标必需图像（png 或矢量）相对于您的项目目录的位置，或颜色引用
monochrome	对于自适应图标是可选的，但对于主题图标是必需的图像（png 或矢量）相对于您的项目目录的位置
density	必需指定的图标密度

自适应图标

要使用自适应图标，必须定义 background、foreground 和可选的 monochrome 属性，而不是 src 属性。src 属性不用于自适应图标。

使用图像的自适应图标

<platform name="android">
  <icon monochrome="res/icon/android/ldpi-monochrome.png" background="res/icon/android/ldpi-background.png" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon monochrome="res/icon/android/mdpi-monochrome.png" background="res/icon/android/mdpi-background.png" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon monochrome="res/icon/android/hdpi-monochrome.png" background="res/icon/android/hdpi-background.png" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon monochrome="res/icon/android/xhdpi-monochrome.png" background="res/icon/android/xhdpi-background.png" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="res/icon/android/xxhdpi-background.png" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="res/icon/android/xxxhdpi-background.png" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

注意：在此示例中，前景色图像也将用作不支持自适应图标的 Android 设备的后备图标。可以通过设置 src 属性来覆盖后备图标。

使用矢量的自适应图标

<platform name="android">
  <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" />
  <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" />
  <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" />
  <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" />
  <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" />
  <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" />
</platform>

注意：在此示例中，当使用矢量或颜色定义前景色属性时，必须定义 src 属性。

使用颜色的自适应图标

在您的项目目录中创建一个 res/values/colors.xml 资源文件，以存储应用程序的颜色定义。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#FF0000</color>
</resources>

在 config.xml 中，我们将添加 resource-file 将 colors.xml 复制到适当的位置，以便在构建时可以使用这些颜色。

<platform name="android">
  <resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />

  <icon monochrome="res/icon/android/ldpi-monochrome.png" background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon monochrome="res/icon/android/mdpi-monochrome.png" background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon monochrome="res/icon/android/hdpi-monochrome.png" background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon monochrome="res/icon/android/xhdpi-monochrome.png" background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

标准图标

    <platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
        <icon src="res/android/ldpi.png" density="ldpi" />
        <icon src="res/android/mdpi.png" density="mdpi" />
        <icon src="res/android/hdpi.png" density="hdpi" />
        <icon src="res/android/xhdpi.png" density="xhdpi" />
        <icon src="res/android/xxhdpi.png" density="xxhdpi" />
        <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
    </platform>

另请参阅

浏览器

图标不适用于浏览器平台。

iOS

    <platform name="ios">
        <!-- iOS 8.0+ -->
        <!-- iPhone 6 Plus  -->
        <icon src="res/ios/[email protected]" width="180" height="180" />
        <!-- iOS 7.0+ -->
        <!-- iPhone / iPod Touch  -->
        <icon src="res/ios/icon-60.png" width="60" height="60" />
        <icon src="res/ios/[email protected]" width="120" height="120" />
        <!-- iPad -->
        <icon src="res/ios/icon-76.png" width="76" height="76" />
        <icon src="res/ios/[email protected]" width="152" height="152" />
        <!-- Spotlight Icon -->
        <icon src="res/ios/icon-40.png" width="40" height="40" />
        <icon src="res/ios/[email protected]" width="80" height="80" />
        <!-- iOS 6.1 -->
        <!-- iPhone / iPod Touch -->
        <icon src="res/ios/icon.png" width="57" height="57" />
        <icon src="res/ios/[email protected]" width="114" height="114" />
        <!-- iPad -->
        <icon src="res/ios/icon-72.png" width="72" height="72" />
        <icon src="res/ios/[email protected]" width="144" height="144" />
        <!-- iPad Pro -->
        <icon src="res/ios/icon-167.png" width="167" height="167" />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="res/ios/icon-small.png" width="29" height="29" />
        <icon src="res/ios/[email protected]" width="58" height="58" />
        <icon src="res/ios/[email protected]" width="87" height="87" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/ios/icon-50.png" width="50" height="50" />
        <icon src="res/ios/[email protected]" width="100" height="100" />
        <!-- iTunes Marketing Image -->
        <icon src="res/ios/icon-1024.png" width="1024" height="1024" />
    </platform>

另请参阅

iPad 和 iPhone 上的应用图标

Electron

自定义应用程序的图标

可以在 config.xml 文件中使用 <icon> 元素声明自定义图标。可以定义两种类型的图标，应用程序图标和程序包安装程序图标。这些图标应该在 Electron 的平台节点 <platform name="electron"> 中定义。

一个图标可用于应用程序和安装程序，但此图标应至少为 512x512 像素，才能在所有操作系统上正常工作。

注意：如果未提供自定义图标，则会使用 Apache Cordova 默认图标。

注意：在 macOS 上使用 cordova run 时，不会显示自定义图标。它默认为 Electron 的图标。

<platform name="electron">
    <icon src="res/electron/icon.png" />
</platform>

您可以通过设置 target 属性来为应用程序和安装程序提供唯一的图标。如上所述，安装程序图像应为 512x512 像素，才能在所有平台上正常工作。

<platform name="electron">
    <icon src="res/electron/app.png" target="app" />
    <icon src="res/electron/installer.png" target="installer" />
</platform>

对于支持高 DPI 分辨率的设备（例如 Apple 的 Retina 显示屏），您可以创建一组具有相同基本文件名但带有其倍增器后缀的图像。

例如，如果基本图像的文件名为 icon.png 并且是标准分辨率，则 [email protected] 将被视为 DPI 从基本值翻倍的高分辨率图像。

icon.png (256px x 256px)
[email protected] (512px x 512px)

如果要同时支持具有不同 DPI 密度的显示器，可以将不同大小的图像放在同一文件夹中，并使用不带 DPI 后缀的文件名。例如

<platform name="electron">
    <icon src="res/electron/icon.png" />
    <icon src="res/electron/[email protected]" />
    <icon src="res/electron/[email protected]" />
    <icon src="res/electron/[email protected]" target="installer" />
</platform>