メインコンテンツまでスキップ
バージョン: v8

スプラッシュ画面とアイコン

@capacitor/assetsツールを使用して、iOS、Android、またはProgressive Web Applicationのスプラッシュ画面とアイコンを生成できます。

まず、@capacitor/assetsをインストールします:

npm install @capacitor/assets --save-dev

以下のフォルダ/ファイル名構造を使用してアイコンとスプラッシュ画面のソース画像を用意します:

assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
  • アイコンファイルは最低1024px x 1024pxにしてください。
  • スプラッシュ画面ファイルは最低2732px x 2732pxにしてください。
  • フォーマットはjpgまたはpngが使用できます。

その後、生成を実行します(ネイティブプロジェクトに適用するか、PWAマニフェストファイルを生成します):

npx capacitor-assets generate

または、--ios--android--pwaを使用して特定のプラットフォーム向けに生成することもできます。

注記

コミュニティで管理されているVS Code拡張機能でもスプラッシュ画面とアイコンのアセットを生成できます。

Android 12以降

Android 12以降、GoogleはスプラッシュスクリーンのAndroid 11以下で可能だったフルスクリーン画像の代わりに、色付きの背景と小さなアイコンを使用するように表示方法を変更しました。この変更に関する追加ドキュメントはdeveloper.android.comで確認できます。