🐡

【react-native】アプリアイコンの実装

2024/02/13に公開

背景

スマホアプリをリリース際に必要な作業として、アイコンの実装する必要がある。

実装方法

アイコンの用意

  • 事前にアイコンを準備します。

https://zenn.dev/doshirote/articles/22b8e7061916f3

※ただし上記の相場はもっと安く済ませそうです。(下記サービスより)

https://resizeappicon.com/

こんなサービスがあるとは思いませんでした。。。これだと512 * 512もしくは1024 * 1024が一点あれば良かったんですね;;

サイズ毎に作成を依頼して損をしてしまいました。。。

iOS

  • xcodeでImagesを開きます。

  • AppIconを押下し、対象の箇所にアイコンをドラックすればいいです。

android

  • ファイルを格納

【フォルダ名】
android/app/src/main/res

上記のフォルダに、それぞれのファイルサイズに応じたフォルダにアプリのアイコンを格納する

mipmap-hdpi = 72 * 72
mipmap-mdpi = 48 * 48
mipmap-xhdpi = 96 * 96
mipmap-xxhdpi = 144 * 144
mipmap-xxxhdpi = 192 * 192

またファイル名称に関しては、下記ファイルで定義されている
※ファイル名を変更することも可能ですが、デフォルトで入っている画像名で差し替えた方がいいと思います。

android/app/src/main/AndroidManifest.xml

気になった点

androidの丸いアイコンですが、あまり綺麗に作成できていない気がします。
※上記のサービスを利用した際(丸いアイコンがないので)

ちょっと分かっていないのでアレですが、もしかすると丸いアイコンで綺麗に出したい場合は別途依頼をするか別のサービスを見つけないといけないかもしれません。
※リリースの時期の関係でこれ以上工数を割けないので、一旦保留にしています。
※エミュレーター等で確認すると、なんとなく伝わるのではないかと思います。

Discussion