圖示

本節說明如何為各種平台設定應用程式的圖示。關於啟動畫面影像的文件可以在 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/icon-60@3x.png" 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/icon-60@2x.png" width="120" height="120" />
        <!-- iPad -->
        <icon src="res/ios/icon-76.png" width="76" height="76" />
        <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
        <!-- Spotlight Icon -->
        <icon src="res/ios/icon-40.png" width="40" height="40" />
        <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
        <!-- iOS 6.1 -->
        <!-- iPhone / iPod Touch -->
        <icon src="res/ios/icon.png" width="57" height="57" />
        <icon src="res/ios/icon@2x.png" width="114" height="114" />
        <!-- iPad -->
        <icon src="res/ios/icon-72.png" width="72" height="72" />
        <icon src="res/ios/icon-72@2x.png" 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/icon-small@2x.png" width="58" height="58" />
        <icon src="res/ios/icon-small@3x.png" width="87" height="87" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/ios/icon-50.png" width="50" height="50" />
        <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
        <!-- iTunes Marketing Image -->
        <icon src="res/ios/icon-1024.png" width="1024" height="1024" />
    </platform>

另請參閱

Electron

自訂應用程式的圖示

可以使用 config.xml 檔案中的 <icon> 元素宣告自訂圖示。 可以定義兩種圖示類型，應用程式圖示和套件安裝程式圖示。 這些圖示應在 Electron 平台的節點 <platform name="electron"> 中定義。

一個圖示可用於應用程式和安裝程式，但此圖示至少應為 512x512 像素，才能在所有作業系統上運作。

注意：如果未提供自訂圖示，則會使用 Apache Cordova 的預設圖示。

注意：使用 cordova run 時，macOS 不會顯示自訂圖示。 它會預設為 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 且為標準解析度，則 icon@2x.png 將被視為高解析度影像，其 DPI 是基本影像的兩倍。

  • icon.png (256px x 256px)
  • icon@2x.png (512px x 512px)

如果您想同時支援具有不同 DPI 密度的顯示器，您可以將不同尺寸的影像放在同一個資料夾中，並使用沒有 DPI 後綴的檔名。 例如

<platform name="electron">
    <icon src="res/electron/icon.png" />
    <icon src="res/electron/icon@1.5x.png" />
    <icon src="res/electron/icon@2x.png" />
    <icon src="res/electron/icon@4x.png" target="installer" />
</platform>