通常要上架APP一定會有自己獨特的Icon和Splash Screen如果沿用預設值就真的太Low了，而且換掉Icon和Splash Screen甚至可以替APP增加識別度和使用者體驗（應該吧XD），下圖可以看到專案預設的Icon和Splash Screen是長這樣子

💡 Android 12+ 以上Splash Screen需要額外設定啟用詳細啟動方式可以【點我參考】，12+預設的是默認的Icon圖示（如下圖）



替換Icon和Splash Screen

第一步先在專案底下建立一個名字為「resources」的資料夾


接著準備好要替換的Icon圖檔和Splash Screen的圖檔，我們總共需要準備4種圖片並且分別命名為
  1. icon.png（jpg）
    💡 需要最少1024×1024px的大小圖片
  2. splash.png（jpg）
    💡需要最少2732×2732px的大小圖片
  3. android\icon-foreground.png（jpg）
    💡需要最少432×432px的大小圖片
  4. android\icon-background.png（jpg）
    💡需要最少432×432px的大小圖片
💡 Android 8.0（API 26）開始引入了新的自適應圖標功能所以在這之後的Icon都會優先使用「icon-foreground」和「icon-background」，對於不支援自適應圖標的 Android 設備仍會產生成常規 Android 圖標作為後備方案使用

圖片準備好之後就可以使用命令來建立Icon和Splash Screen，我們使用cordova-res可以先試試看指令是否有正確安裝（沒有安裝的可以【點我前往參考安裝方式】）

cordova-res -v

接著要產生提供給Android和Ios使用的Icon和Splash Screen可以使用以下指令，執行完成後cordova-res自動幫你產生出所有大小對應的Icon和Splash Screen了是不是很方便！

Android

cordova-res android --skip-config --copy

Ios

cordova-res ios --skip-config --copy
💡 參數--skip-config主要是因為專案所安裝的原生套件是「Capacitor」而不是「Cordova」，Capacitor本身的專案不會有config.xml檔案因此可以下此參數來略過



產生完Icon和Splash Screen之後只需要重新build或是sync一次專案就可以看到替換後的樣子囉！

Android

ionic cap build android

Ios

ionic cap sync android


2023/05/26 補充說明：另外也可以使用IconKitchen【點我前往】，它可以幫你快速的產生各種大小的Icon圖檔哦！


Splash Screen手動關閉

不知道大家在開APP的時候有沒有發現Splash Screen結束後到網頁真正執行前其實有一小段的白畫面空窗期，那是因為Splash Screen預設是500毫秒就會自動關閉但此時Ionic的App Root可能還沒有載入完成而導致這個問題，但這不是我們樂見的因此我們需要稍作設定讓Splash Screen的消失時間點改變

這裡我們會用到Capacitor的原生「Splash Screen插件」【點我前往】，安裝完成後需要同步一下專案
npm install @capacitor/splash-screen

Android

ionic cap sync android

Ios

ionic cap sync ios

接著在專案找到「capacitor.config.ts」的檔案加入以下的JSON資料
plugins: {
  SplashScreen: {
    launchShowDuration: 1000, //啟用自動隱藏時顯示啟動初始屏幕的時間
    launchAutoHide: false //是否在 launchShowDuration 後自動隱藏
  }
}
💡 注意！SplashScreen的開頭S必須是大寫！
💡「launchAutoHide」是「launchShowDuration」所設定之秒數結束之後是否要自動隱藏所以如果關閉此選項請一定要手動隱藏Splash Screen！否則畫面會一直卡在Splash Screen的畫面哦！

接著我們打開「app.component.ts」Import一下「SplachScreen」
import { SplashScreen } from '@capacitor/splash-screen';
在constructor注入「Platform」服務並且加入程式碼，關於Platform.ready的資訊可以【點我前往】
constructor(private platform: Platform) {
  this.platform.ready().then(async () => {
    await SplashScreen.hide();
  });
}
💡「this.platform.ready()」就是WebView已經載入好後會執行的一個Promise，前面我們在「capacitor.config.ts」裡面設定了「launchAutoHide」讓Splash Screen不會自動隱藏，因此我們必須在這個Promis裡面把Splash Screen做一個隱藏的動作

最後只需要重新編譯就完成了控制Splash Screen手動關閉的功能，這裡我放上前後的比對圖各位可以比較一下兩者的差異哦！