技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは wordpreddでオリジナルテーマを作成している時、各固定ページに …

no image

[wordpress]パーミションを変えたらHTTP500(Internal Server Error)

こんばんは Kusanagiにインストールしたwordpressの管理画面からフ …

no image

【Angular】component.htmlをprettierで整形する

こんにちは 今回はcomponent.htmlをprettierで整形する方法を …

no image

【gem/bundle】あんたたち一体どういう関係なのよ!!

どうも中田です。 今回はgemとbundleの話。 前置き よくあるgemの説明 …

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …