【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

村上 著者:村上

【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

マージに失敗したのか、Cordovaアプリのアイコンの設定をしている記述が掻き消えたので、備忘録を兼ねてまとめ。
これでもしもう一度コードが吹っ飛んでも大丈夫!

 

アプリのアイコンは config.xml で指定します。
まず、iOSアプリのアイコンは、下記のように記述します。

<platform name="ios">
    <icon height="180" src="res/icon/ios/icon-60@3x.png" width="180" />
    <icon height="60" src="res/icon/ios/icon-60.png" width="60" />
    <icon height="120" src="res/icon/ios/icon-60@2x.png" width="120" />
    <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
    <icon height="152" src="res/icon/ios/icon-76@2x.png" width="152" />
    <icon height="40" src="res/icon/ios/icon-40.png" width="40" />
    <icon height="80" src="res/icon/ios/icon-40@2x.png" width="80" />
    <icon height="57" src="res/icon/ios/icon.png" width="57" />
    <icon height="114" src="res/icon/ios/icon@2x.png" width="114" />
    <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon height="144" src="res/icon/ios/icon-72@2x.png" width="144" />
    <icon height="29" src="res/icon/ios/icon-small.png" width="29" />
    <icon height="58" src="res/icon/ios/icon-small@2x.png" width="58" />
    <icon height="50" src="res/icon/ios/icon-50.png" width="50" />
    <icon height="100" src="res/icon/ios/icon-50@2x.png" width="100" />
    <icon height="1024" src="res/icon/ios/icon-1024.png" width="1024" />
</platform>

Androidのアイコンの設定はこちら。

<platform name="android">
    <icon density="ldpi" src="res/icon/android/icon-ldpi.png" />
    <icon density="mdpi" src="res/icon/android/icon-mdpi.png" />
    <icon density="hdpi" src="res/icon/android/icon-hdpi.png" />
    <icon density="xhdpi" src="res/icon/android/icon-xhdpi.png" />
    <icon density="xxhdpi" src="res/icon/android/icon-xxhdpi.png" />
</platform>

が、Androidのアイコンサイズがいまいちわからないので簡単にまとめ。
このアイコンサイズについて、毎回こういったアイコンを準備するたびに調べているので、今回まとめました。

解像度 アイコンサイズ
ldpi 36×36px
mdpi 48×48px
hdpi 72×72px
xhdpi 96×96px
xxhdpi 144×144px
xxxhdpi 192×192px

あとは、Android・iOS 共に、上の表などを参考に、それぞれの画像を用意すれば設定完了です。
(上記コードだと、res/icon ディレクトリにそれぞれ android、ios フォルダを用意し、アイコンを保存しています)
いつも通りにビルドした後、実機で実行すればアイコンが設定されています。

 

以上、Cordovaアプリ開発時に、アプリアイコンを設定する方法でした。

  • この記事いいね! (0)

著者について

村上

村上 administrator

コメントは停止中です。