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.

sample-icon

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

Support me

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

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

This post has been manually curated by @bhattg from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

_{100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited.}.

This post received an extra 5.06% vote for delegating HP / holding IUC tokens.

Sort:

Trending

[-]

indiaunited (67) last year

$0.00

1 vote

sagarkothari88 (74) last year

Thank you so much @indiaunited & @bhattg for the curation.

ecency (76) last year

Yay! 🤗
Your content has been boosted with Ecency Points, by @sagarkothari88.
Use Ecency daily to boost your growth on platform!

Support Ecency
Vote for new Proposal
Delegate HP and earn more

peter-stone (59) last year

Thanks for the programming tutorial, and as for the previous comment, time and priorities should have some kind of compromise between them, for me, programming is the person who took his place at the end of the line :)
!PIZZA

Thank you for stopping by.
Whenever you've the priority & time, I hope that these tutorial will help you.

!PIZZA

!LUV

@sagarkothari88 reward 50 points

!MEME

!GIF programming

At the moment, it is important for me to know where and what I can find, I mean information if I need it :)
!PIZZA

@peter-stone

Yep. Keep these posts bookmarked.

hivegifbot (64) last year

Via Tenor

luvshares (58) last year

Hive General chat | Type ! help (no space) to get help on Hive. Info

Made with LUV by crrdlx

meme.bot (48) last year

Credit: ianmcg
Earn Crypto for your Memes @ HiveMe.me!

pizzabot (58) last year (edited)

PIZZA!

$PIZZA slices delivered:
@peter-stone_(4/5) tipped @sagarkothari88 (x2)
sagarkothari88 tipped peter-stone

hivebuzz (74) last year

Congratulations @sagarkothari88! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You distributed more than 51000 upvotes.
Your next target is to reach 52000 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

To support your work, I also upvoted your post!

Check out our last posts: