Konyで作ったWeb・Mobileアプリにアイコンを設定する手順【V8】

## 目次
1. はじめに
2. 実装方法
3. まとめ


## はじめに
今回は、アプリの顔となるアプリアイコンの設定方法について記載します。
アプリをリリースする場合は、必ず設定する内容ですが
個人的にどのように設定すれば良いか迷った部分なので、同じ箇所でつまづいた方は参考にしてみてください:eyes:


## 実装方法
### モバイル（iOS）の場合
iOSの場合は、Project Settings->Native->iPhone/iPad/Watchを選択すると
App iconメニューが表示されますので、ここで設定が可能です。
![iPhoneicon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0360d3ea-3388-f30d-637b-d0ab997d2e85.png)

それぞれ、2x,3xなどの表記がありますが、それぞれ設定が必要なのでアイコンを作成したら、
それぞれのサイズを作成しアップロードするようにして下さい。
例えば、20ptの2xだと、40ptサイズのアイコンをアップロードする必要があります。

↓のように全てのアイコンサイズを作成したら、
それぞれのサイズの箇所に画像をアップロードします。
![スクリーンショット 2020-09-28 16.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/319bbf63-19c7-98ff-eb93-a17105b45789.png)

全てアップロードしたら、Finishをクリックして設定を完了します。
設定が完了したら、Run Asを行いXcodeでのBuildを行います。

無事アイコンがアップロードされると、
Xcodeのアイコン設定画面にKony Visualizerで設定したアイコンが表示されます。

以下のようにXcode->General->App Icons and Launch Imagesの横の小さな右矢印をクリックすると、
アップロードされた画像がチェックできます。
![スクリーンショット 2020-09-28 16.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cf3258c0-dd75-fdc5-729f-f7e06d0015ff.png)
右矢印クリックすると、アイコンが表示される
![スクリーンショット 2020-09-28 16.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/756a1350-6a26-4f47-96e8-9a0cda2561ef.png)


この状態で実機にアプリをインストールしてみます！
右下に設定したアプリアイコンが表示されていますね:grinning:
![IMG_ABF570AA05F4-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ceb060df-4cb0-11cf-2d79-07f9241d8a84.jpeg)

iOSの設定はこれで完了です！

### モバイル（Android）の場合
Androidの場合のアイコン設定を説明します。

Androidの場合も、それぞれのサイズごとにアイコンを作成します。
作成したら、それぞれのファイルにアイコンをアップロードする必要があるため、
`/Users/PC名/Work Space名/プロジェクト名/resources/mobile/native/android`の直下に`mipmap`という名前の以下のリソースファイルを作成します。

![スクリーンショット 2020-09-28 17.27.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/66467780-a623-8649-e790-68a9b7db8d58.png)

各々以下のサイズで作成を行い、`launcher.png`の名前で画像をアップロードしていきます。
* mipmap-ldpi 36px
* mipmap-mdpi 48px
* mipmap-hdpi 72px
* mipmap-xhdpi 96px
* mipmap-xxhdpi 144px
* mipmap-xxxhdpi 192px

全ての画像がアップロードできたら、
Project Settingsを開き、Native->Androidを選択
下にスクロールして、`Manifest Properties & Gradle Build Entries`->`Tags`を選択してください。

Tagsメニューの`Application Tag Attributes`に、
`android:icon="@mipmap/launcher"`を設定して、Finishをクリックすると設定完了です。
<font color="Red">※アイコン名が、icon.pngの場合は、`android:icon="@mipmap/icon"`と設定してください。</font>
![スクリーンショット 2020-09-28 17.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e0e90813-17ed-9114-e911-07ac01505a92.png)

これでAndroidの設定も完了です！

### Webの場合
Webの場合は、デバイスごとの設定が不要なので、一点だけ変更すれば設定は完了です。
モバイルと同様、Project Settingsを開き、Desktop Webのタブを開きます。

このメニューのWeb Browser(favicon.ico)とあるので、
設定したいアイコンの名前を`favicon.ico`と命名し、Browserボタンをクリックして、
画像を選択すれば完了です。
![favicon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fdef6781-c7d3-2283-ab02-5d831f659e81.png)

<font color="Red">※ここで、拡張子を`.ico`に設定しないと、画像の選択できないため注意するようにしてください。</font>

今回はこちらを設定しました。
![favi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f5be6c0f-6d51-8865-0b10-8520f8e9d16d.png)
アイコン設定し、Buildをすると無事アイコンが設定されて表示されました！
![スクリーンショット 2020-09-28 17.03.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9ad1d01e-294d-7cdd-9ff2-a31eaf787e04.png)

これでWeb側のアイコン設定も完了です。


## まとめ
今回は、アプリを公開する際に必ず必要となってくるアプリアイコンの設定方法についてご説明しました！
アプリアイコンは、どんなアプリでもアプリのイメージや印象を残すために必要なものなので、
是非今回紹介した方法を参考にしてみてくださいね！

## 参考
(Add and Manage Images and Other Media)[https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Adding_and_Managing_Images.htm#Particul]