Capacitorでクロスプラットフォームアプリを開発している際、初期の「Ionicアイコン」から自作のオリジナルアイコンに変更したいケースは必ず出てきます。
しかし、「ドキュメント通りにやったはずなのに、なぜかAndroidでアイコンが変わらない…」と沼にハマってしまう人が非常に多いのが現状です。
本記事では、公式ツール@capacitor/assetsを使った最新のアイコン変更手順と、公式ドキュメント準拠の設定方法、そしてAndroid実機でアイコンが反映されない時の解決策をわかりやすく解説します!
1. 事前準備:公式ドキュメント推奨の画像配置
Capacitor公式(Ionic)のアセット生成ツールを使うため、まずはプロジェクトのルートディレクトリに resources フォルダを作成します。
💡 公式ドキュメントのポイント 以前のバージョン(
cordova-resなど)やドキュメントの記載に合わせ、フォルダ名はresourcesにするのが最も確実です。(※ツール自体はassetsフォルダも自動認識します)
Android 8.0以降で導入された「アダプティブアイコン(丸型や四角型に動的に切り替わる仕様)」に綺麗に対応させるため、画像は以下の2枚(1024×1024px以上の透過PNG)を用意するのが推奨です。
Plaintext
your-project/
├── resources/
│ ├── icon-only.png <-- アイコンのロゴ部分(背景は透明)
│ └── icon-background.png <-- アイコンの背景色・デザイン
└── package.json
※どうしても1枚の画像で済ませたい場合は、resources/icon.png を配置するだけでも動作しますが、Androidでの表示崩れを防ぐためには上記のように2枚に分けるのがベストです。
2. コマンド3発でアイコンを自動生成&同期
画像の準備ができたら、ターミナルで以下の手順を実行します。各プラットフォーム(iOS/Android)に必要な全サイズのアイコンが自動生成されます。
ステップ1:ツールのインストール(未導入の場合のみ)
まずは、公式のアセット生成ツールを開発環境にインストールします。
Bash
npm install -D @capacitor/assets
ステップ2:アセットの自動生成
resources フォルダ内の画像をもとに、ネイティブ向けのアセットを生成します。(Androidのみに限定する場合は --android フラグを付けます)
Bash
npx capacitor-assets generate --android
ステップ3:Capacitorプロジェクトへの同期
生成された画像ファイルを、実際のAndroid/iOSプロジェクトに反映させます。この同期コマンドを忘れると、アプリに反映されないので注意してください。
Bash
npx cap sync
これで、Android Studio側の app/src/main/res/mipmap-* 内にある ic_launcher などの画像がすべて自動で書き換わります。
3. 【超重要】Androidでアイコンが変わらない時の対処法
「手順通りにやったのに、スマホの画面を見たら古いアイコンのまま…」
この現象の原因は、ほぼ100% Android端末やエミュレータが持つ強力な「キャッシュ」の悪さです。コードや画像が正しく書き換わっていても、スマホ側が古いアイコンを記憶してしまっています。
アイコンが切り替わらない場合は、以下の手順を必ず試してください。
- アプリを端末から完全にアンインストール(削除)する
- 上書きインストールではキャッシュが消えないことが多いため、一度アプリアイコンを長押しして完全に削除します。
- スマホ端末・エミュレータを「再起動」する
- OSレベルで保持されているアイコンのキャッシュをクリアするために、端末の再起動が非常に有効です。
- Android Studioでクリーンビルドを行う
- Android Studioのメニューから
Build>Clean Projectを実行し、その後Rebuild Projectを行ってから再度アプリをインストール(Run)します。
- Android Studioのメニューから
まとめ
Capacitorアプリのアイコン変更は、@capacitor/assets を使えば驚くほど簡単に自動生成できます。
- フォルダ名はドキュメント準拠の
resourcesにする - Androidの表示崩れを防ぐため
icon-only.pngとicon-background.pngに分ける - 変わらない時は「アンインストール & 端末再起動」でキャッシュを消し去る!
このポイントを押さえて、お気に入りのオリジナルアイコンをアプリに適用してみてください!


コメント