图标

本节介绍如何为各种平台配置应用程序的图标。有关启动画面图像的文档可以在 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 或矢量）的位置，相对于您的项目目录，或颜色参考
单色	自适应可选，但主题图标必需图像（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>

注意：在本例中，当 foreground 属性使用矢量或颜色定义时，必须定义 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 是基本图像的 2 倍。

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>