How To Change Phonegap App Icon
Cordova is one of the most complicated of all of the build targets as far as icons go, because not only do you need to place the icons in specific folders, you also need to register them in the src-cordova/config.xml file. Further, if you are using splash screens (which you should), you will also need to install cordova-plugin-splashscreen and register it in your config.xml.
If you discover one file that is new or missing, please open an issue .
Icon Genie CLI
TIP
We highly recommend using the Icon Genie CLI , because it consumes a source icon and automatically clones, scales, minifies and places the icons in the appropriate directories for you. When needed, it also tells you what tags you'll need to add to your /src/index.template.html file.
Quickly bootstrap the necessary images with Icon Genie CLI. For a complete list of options, please visit the Icon Genie CLI command list page.
$ icongenie generate -m cordova -i /path/to/source/icon.png [-b /path/to/background.png] Manual instructions
Unless you are using the Icon Genie CLI, this is what you need to do:
$ cd src-cordova $ cordova plugin add cordova-plugin-splashscreen $ cordova plugin save src-cordova/ config.xml res/ android/ ldpi.png # 36x36 mdpi.png # 48x48 hdpi.png # 72x72 xhdpi.png # 96x96 xxhdpi.png # 144x144 xxxhdpi.png # 192x192 ios/ icon.png # 57x57 icon@2x.png # 144x144 icon- 20@2x.png icon- 20@3x.png icon- 29.png icon- 29@2x.png icon- 29@3x.png icon- 40@2x.png icon- 60@2x.png icon- 60@3x.png icon- 20.png icon- 20@2x.png icon- 40.png icon- 50.png icon- 50@2x.png icon- 72.png icon- 72@2x.png icon- 76.png icon- 76@2x.png icon- 83.5@2x.png icon- 1024.png icon- 24@2x.png icon- 27.5@2x.png icon- 29@2x.png icon- 29@3x.png icon- 40@2x.png icon- 44@2x.png icon- 50@2x.png icon- 86@2x.png icon- 98@2x.pn screen/ android/ splash-land-ldpi.png # 320x200 splash-port-ldpi.png # 200x320 splash-land-mdpi.png # 480x320 splash-port-mdpi.png # 320x480 splash-land-hdpi.png # 800x480 splash-port-hdpi.png # 480x800 splash-land-xhdpi.png # 1280x720 splash-port-xhdpi.png # 720x1280 splash-land-xxhdpi.png # 1600x960 splash-port-xxhdpi.png # 960x1600 splash-land-xxxhdpi.png # 1920x1280 splash-port-xxxhdpi.png # 1280x1920 ios/ Default@2x~iphone~comcom.png Default@2x~iphone~comany.png Default@2x~iphone~anyany.png Default@3x~iphone~anycom.png Default@3x~iphone~comany.png Default@3x~iphone~anyany.png Default@2x~ipad~comany.png Default@2x~ipad~anyany.png And here is part of what your config.xml should look like:
<platform name = "android" > <icon density = "ldpi" src = "res/android/ldpi.png" /> <icon density = "mdpi" src = "res/android/mdpi.png" /> <icon density = "xxxhdpi" src = "res/android/xxxhdpi.png" /> <splash density = "land-ldpi" src = "res/screen/android/splash-land-ldpi.png" /> <splash density = "port-ldpi" src = "res/screen/android/splash-port-ldpi.png" /> <splash density = "land-mdpi" src = "res/screen/android/splash-land-mdpi.png" /> <icon density = "hdpi" src = "res/android/hdpi.png" /> <icon density = "xxhdpi" src = "res/android/xxhdpi.png" /> <splash density = "port-mdpi" src = "res/screen/android/splash-port-mdpi.png" /> <splash density = "land-hdpi" src = "res/screen/android/splash-land-hdpi.png" /> <splash density = "land-xxhdpi" src = "res/screen/android/splash-land-xxhdpi.png" /> <splash density = "port-xxhdpi" src = "res/screen/android/splash-port-xxhdpi.png" /> <splash density = "land-xxxhdpi" src = "res/screen/android/splash-land-xxxhdpi.png" /> <splash density = "port-xxxhdpi" src = "res/screen/android/splash-port-xxxhdpi.png" /> <icon density = "xhdpi" src = "res/android/xhdpi.png" /> <splash density = "port-hdpi" src = "res/screen/android/splash-port-hdpi.png" /> <splash density = "land-xhdpi" src = "res/screen/android/splash-land-xhdpi.png" /> <splash density = "port-xhdpi" src = "res/screen/android/splash-port-xhdpi.png" /> </platform > <platform name = "ios" > <icon height = "57" src = "res/ios/icon.png" width = "57" /> <icon height = "114" src = "res/ios/icon@2x.png" width = "114" /> <splash src = "res/screen/ios/Default@2x~iphone~comcom.png" /> <icon height = "60" src = "res/ios/icon-20@3x.png" width = "60" /> <icon height = "29" src = "res/ios/icon-29.png" width = "29" /> <icon height = "58" src = "res/ios/icon-29@2x.png" width = "58" /> <icon height = "87" src = "res/ios/icon-29@3x.png" width = "87" /> <icon height = "80" src = "res/ios/icon-40@2x.png" width = "80" /> <icon height = "120" src = "res/ios/icon-60@2x.png" width = "120" /> <icon height = "180" src = "res/ios/icon-60@3x.png" width = "180" /> <icon height = "20" src = "res/ios/icon-20.png" width = "20" /> <icon height = "40" src = "res/ios/icon-20@2x.png" width = "40" /> <icon height = "100" src = "res/ios/icon-50@2x.png" width = "100" /> <icon height = "72" src = "res/ios/icon-72.png" width = "72" /> <icon height = "144" src = "res/ios/icon-72@2x.png" width = "144" /> <icon height = "76" src = "res/ios/icon-76.png" width = "76" /> <icon height = "152" src = "res/ios/icon-76@2x.png" width = "152" /> <icon height = "167" src = "res/ios/icon-83.5@2x.png" width = "167" /> <icon height = "1024" src = "res/ios/icon-1024.png" width = "1024" /> <icon height = "48" src = "res/ios/icon-24@2x.png" width = "48" /> <icon height = "55" src = "res/ios/icon-27.5@2x.png" width = "55" /> <icon height = "88" src = "res/ios/icon-44@2x.png" width = "88" /> <icon height = "172" src = "res/ios/icon-86@2x.png" width = "172" /> <icon height = "196" src = "res/ios/icon-98@2x.png" width = "196" /> <splash src = "res/screen/ios/Default@2x~iphone~anyany.png" /> <splash src = "res/screen/ios/Default@3x~iphone~anyany.png" /> <splash src = "res/screen/ios/Default@3x~iphone~anycom.png" /> <splash src = "res/screen/ios/Default@3x~iphone~comany.png" /> <splash src = "res/screen/ios/Default@2x~ipad~anyany.png" /> <splash src = "res/screen/ios/Default@2x~ipad~comany.png" /> <icon height = "40" src = "res/ios/icon-40.png" width = "40" /> <icon height = "50" src = "res/ios/icon-50.png" width = "50" /> <splash src = "res/screen/ios/Default@2x~iphone~comany.png" /> <splash src = "res/screen/ios/Default-Landscape-2436h.png" /> <splash src = "res/screen/ios/Default@2x~iphone~anyany" /> <splash src = "res/screen/ios/Default@2x~iphone~comany" /> <splash src = "res/screen/ios/Default@2x~iphone~comcom" /> <splash src = "res/screen/ios/Default@3x~iphone~anyany" /> <splash src = "res/screen/ios/Default@3x~iphone~anycom" /> <splash src = "res/screen/ios/Default@3x~iphone~comany" /> <splash src = "res/screen/ios/Default@2x~ipad~anyany" /> <splash src = "res/screen/ios/Default@2x~ipad~comany" /> </platform > How To Change Phonegap App Icon
Source: https://quasar.dev/quasar-cli/developing-cordova-apps/app-icons-cordova
Posted by: websternizeed.blogspot.com
0 Response to "How To Change Phonegap App Icon"
Post a Comment