Quasar + Icon Genie CLI - Generating App Icons for iOS & Android App

Why?

• Usually you would need an app-icon for your project
• If your project isn't just a test project or a "Hello World" project.

Basic Setup

• First make sure to have src-capacitor (iOS & Android codebase) generated for you.
• With following command, you'll generate iOS source.

quasar dev -m capacitor -T ios

• With following command, you'll generate Android source.

quasar dev -m capacitor -T android

• Make sure to install icongenie on your system

npm install -g @quasar/icongenie

Let’s generate App Icons

• Navigate to your project directory.
• Add a new folder calld icon under src directory.

• Move the app-icon there & provide file name as AppIcon.png
• I think it is best to provide png format. I have not tried jpg or jpeg format

icongenie generate -i src/icon/AppIcon.png --skip-trim

• In case if you want to try & you don't have the icon, you can use following icon for experiments.

Did it work for Android?

• Yes, it worked for Android.
• It generated necessary app-icons & app-launcher background

Did it work for iOS?

• No, it didn't work as expected for iOS.
• It failed to generate app-icons.
• It did generate app-launcher / splash screen properly.

• As you can see in the image above, I've highlighted the warnings.
• It indicates that app-icons were not generated properly

What do we do for app-icons for iOS?

• I wrote a custom shell script to generate app-icons for iOS.
• Shell script takes a png-file named 1024x1024.png as input & generate app-icons directory.
• I have tested this and works fine on macOS
• Remember - you will need macOS for developing apps for iOS
• It uses sips command to resize the images.
• It also generates the AppIcon.appiconset/Contents.json file

cp 1024x1024.png AppIcon-20.png
sips -Z 20 AppIcon-20.png

cp 1024x1024.png [email protected]
sips -Z 40 [email protected]

cp 1024x1024.png [email protected]
sips -Z 60 [email protected]

cp 1024x1024.png AppIcon-29.png
sips -Z 29 AppIcon-29.png

cp 1024x1024.png [email protected]
sips -Z 58 [email protected]

cp 1024x1024.png [email protected]
sips -Z 87 [email protected]

cp 1024x1024.png AppIcon-40.png
sips -Z 40 AppIcon-40.png

cp 1024x1024.png [email protected]
sips -Z 80 [email protected]

cp 1024x1024.png [email protected]
sips -Z 120 [email protected]

cp 1024x1024.png [email protected]
sips -Z 180 [email protected]

cp 1024x1024.png AppIcon-76.png
sips -Z 76 AppIcon-76.png

cp 1024x1024.png [email protected]
sips -Z 152 [email protected]

cp 1024x1024.png [email protected]
sips -Z 167 [email protected]

cp 1024x1024.png [email protected]

mkdir AppIcon.appiconset

mv AppIcon-20.png AppIcon.appiconset/AppIcon-20.png
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]
mv AppIcon-29.png AppIcon.appiconset/AppIcon-29.png
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]
mv AppIcon-40.png AppIcon.appiconset/AppIcon-40.png
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]
mv AppIcon-76.png AppIcon.appiconset/AppIcon-76.png
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]
mv [email protected] AppIcon.appiconset/[email protected]

echo '{
  "images" : [
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "AppIcon-20.png",
      "scale" : "1x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "AppIcon-29.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "AppIcon-40.png",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "AppIcon-76.png",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "83.5x83.5",
      "idiom" : "ipad",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "size" : "1024x1024",
      "idiom" : "ios-marketing",
      "filename" : "[email protected]",
      "scale" : "1x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}
' > Contents.json

mv Contents.json AppIcon.appiconset/Contents.json

How do I generate app-icons for iOS?

• Navigate to the directory as indicated below.
• Add app-icon with file name 1024x1024.png with 1024 px X 1024 px resolution
• Copy-paste above defined script app-icon-script.sh
• Add permissions to execute it.
• chmod 700 app-icon-script.sh

Run the script

cd /Users/sagar/Projects/hive/the-hive-mobile-app-q/src-capacitor/ios/App/App/Assets.xcassets
sh app-icon-script.sh

• Did it solve the app-icon issue?
• Yes, indeed.
• Here is how it looks.
• All the warnings are gone now.
• App icon is now set for iOS app.

Previous Quasar posts

• Quasar Hacks - state, footer bg, safe-area
• Hide bottom toolbar when keyboard is shown
• Create a project with Quasar Framework
• Add VS Plugins, Create a Component
• Using Quasar Framework instead of Flutter
• Quasar + Axios < Quasar + capacitorjs

Support me

• Did this article help? Please hit upvote & show some support.

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD