技術

Ionicアプリのアイコンやスプラッシュ画像を変更したい!

投稿日:

こんにちは。田中です。

現在Ionicを使ったアプリ開発に携わっているのですが、先日お客様からこんなご依頼がありました。

デフォルトのアプリ名やアイコンでは全然雰囲気が出ないよ!
試作版でも、もっとイケてるアイコンで売り込みしたいから変更よろしく!
(超意訳)

事前にお渡ししていたアドホック版アプリはデフォルトのアイコンだったので以下画像のような感じでした。

アプリアイコン

スプラッシュ画像

 

デフォルトのアイコンもシンプルでなんか好きですけどね。
でもまあ、いかにもプロトタイプ感が出てしまってるのは確か。

ここは一つキャッチーでインパクトのあるアイコンに変更して、お客様のご要望にお答えしたいところです。

アイコン、スプラッシュ画像の変更方法

アプリのresoueces配下に「icon.png」「splash.png」がありました。
こやつらを変更してやれば良さそうです。

推奨サイズは以下の通り。

◎ アプリアイコンサイズ
・1024px ×1024px

◎ スプラッシュ画像
・2732px ×2732px

画像を置き換えたらターミナルから「ionic cordova resources」を唱えます。
(余談ですが田中もコマンドやメソッドは心の中で叫ぶ派のエンジニアです)

この時、画像サイズが合ってないとターミナルに真っ赤な文字でエラーがでます。
怒られたらサイズが間違ってないか見直してみましょう。

実際にやってみた

元のアイコン

変更したアイコン

スプラッシュ画像

無事にアイコン、スプラッシュ画像の変更ができましたー!近い近い顔が近い。

ついさっきまで「スプラッシュ画像」が何なのかも分かっていませんでしたが、なんとかこれでお客様のご要望にも対応できそうです。よかったー。

参考サイト

https://forum.ionicframework.com/t/how-i-can-change-my-app-name/20458

https://forum.ionicframework.com/t/how-to-change-default-launch-icon-of-ionic-app/85744

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Angularでセレクトボックスに色をつけたいとき

こんにちは。コーテッグのこやまです。 Angularでセレクトボックスが特定の値 …

no image

gormでバルクインサート

こんにちは gormでレコードを作成する時は user := User{Name …

[Ionic] error: archive not found at path ‘platforms/ios/〇〇.xcarchive’ ** EXPORT FAILED **

こんにちは。たなかです。   Ionicを利用したアプリ開発もラストス …

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

no image

【Android/ionic】これさえやればOK!アプリ公開への道

どうも、中田です。 ionicでHTML5/CSSハイブリッドアプリ開発してるん …