アイコン

このセクションでは、さまざまなプラットフォーム向けにアプリケーションのアイコンを設定する方法について説明します。スプラッシュスクリーン画像に関するドキュメントは、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に個別のアイコンを提供するためにtargetを設定します

以下の設定を使用して、すべてのプラットフォームで使用される単一のデフォルトアイコンを定義できます。

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

プラットフォームごとに、異なる画面解像度に適合するピクセルパーフェクトなアイコンセットを定義することもできます。

Android

アイコンに単一の画像を使用する代わりに、2つの画像（背景と前景）を使用して**アダプティブアイコン**を作成できます。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 必須
指定されたアイコン密度

アダプティブアイコン

アダプティブアイコンを使用するには、src属性の代わりにbackground、foreground、およびオプションでmonochrome属性を定義する必要があります。 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では、ビルド時に色が使用できるように、colors.xmlを適切な場所にコピーするためにresource-fileを追加します。

<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>`要素で宣言できます。定義できるアイコンには、アプリケーションアイコンとパッケージインストーラーアイコンの2種類があります。 これらのアイコンは、Electronのプラットフォームノード`<platform name="electron">`で定義する必要があります。

アプリケーションとインストーラーに1つのアイコンを使用できますが、すべてのオペレーティングシステムで機能するには、このアイコンは少なくとも**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>

AppleのRetinaディスプレイなどの高DPI解像度をサポートするデバイスの場合、同じベースファイル名で、乗数を接尾辞として付けた一連の画像を作成できます。

たとえば、ベースイメージのファイル名が`icon.png`で標準解像度の場合、`icon@2x.png`はベースのDPIが2倍の高解像度 이미지として扱われます。

  • 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>