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 AppIcon-20@2x.png
sips -Z 40 AppIcon-20@2x.png
cp 1024x1024.png AppIcon-20@3x.png
sips -Z 60 AppIcon-20@3x.png
cp 1024x1024.png AppIcon-29.png
sips -Z 29 AppIcon-29.png
cp 1024x1024.png AppIcon-29@2x.png
sips -Z 58 AppIcon-29@2x.png
cp 1024x1024.png AppIcon-29@3x.png
sips -Z 87 AppIcon-29@3x.png
cp 1024x1024.png AppIcon-40.png
sips -Z 40 AppIcon-40.png
cp 1024x1024.png AppIcon-40@2x.png
sips -Z 80 AppIcon-40@2x.png
cp 1024x1024.png AppIcon-40@3x.png
sips -Z 120 AppIcon-40@3x.png
cp 1024x1024.png AppIcon-60@3x.png
sips -Z 180 AppIcon-60@3x.png
cp 1024x1024.png AppIcon-76.png
sips -Z 76 AppIcon-76.png
cp 1024x1024.png AppIcon-76@2x.png
sips -Z 152 AppIcon-76@2x.png
cp 1024x1024.png AppIcon-83.5@2x.png
sips -Z 167 AppIcon-83.5@2x.png
cp 1024x1024.png AppIcon-512@2x.png
mkdir AppIcon.appiconset
mv AppIcon-20.png AppIcon.appiconset/AppIcon-20.png
mv AppIcon-20@2x.png AppIcon.appiconset/AppIcon-20@2x.png
mv AppIcon-20@3x.png AppIcon.appiconset/AppIcon-20@3x.png
mv AppIcon-29.png AppIcon.appiconset/AppIcon-29.png
mv AppIcon-29@2x.png AppIcon.appiconset/AppIcon-29@2x.png
mv AppIcon-29@3x.png AppIcon.appiconset/AppIcon-29@3x.png
mv AppIcon-40.png AppIcon.appiconset/AppIcon-40.png
mv AppIcon-40@2x.png AppIcon.appiconset/AppIcon-40@2x.png
mv AppIcon-40@3x.png AppIcon.appiconset/AppIcon-40@3x.png
mv AppIcon-60@3x.png AppIcon.appiconset/AppIcon-60@3x.png
mv AppIcon-76.png AppIcon.appiconset/AppIcon-76.png
mv AppIcon-76@2x.png AppIcon.appiconset/AppIcon-76@2x.png
mv AppIcon-83.5@2x.png AppIcon.appiconset/AppIcon-83.5@2x.png
mv AppIcon-512@2x.png AppIcon.appiconset/AppIcon-512@2x.png
echo '{
"images" : [
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "AppIcon-20@2x.png",
"scale" : "2x"
},
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "AppIcon-20@3x.png",
"scale" : "3x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "AppIcon-29@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "AppIcon-29@3x.png",
"scale" : "3x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "AppIcon-40@2x.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "AppIcon-40@3x.png",
"scale" : "3x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "AppIcon-40@3x.png",
"scale" : "2x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "AppIcon-60@3x.png",
"scale" : "3x"
},
{
"size" : "20x20",
"idiom" : "ipad",
"filename" : "AppIcon-20.png",
"scale" : "1x"
},
{
"size" : "20x20",
"idiom" : "ipad",
"filename" : "AppIcon-20@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "ipad",
"filename" : "AppIcon-29.png",
"scale" : "1x"
},
{
"size" : "29x29",
"idiom" : "ipad",
"filename" : "AppIcon-29@2x.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "ipad",
"filename" : "AppIcon-40.png",
"scale" : "1x"
},
{
"size" : "40x40",
"idiom" : "ipad",
"filename" : "AppIcon-40@2x.png",
"scale" : "2x"
},
{
"size" : "76x76",
"idiom" : "ipad",
"filename" : "AppIcon-76.png",
"scale" : "1x"
},
{
"size" : "76x76",
"idiom" : "ipad",
"filename" : "AppIcon-76@2x.png",
"scale" : "2x"
},
{
"size" : "83.5x83.5",
"idiom" : "ipad",
"filename" : "AppIcon-83.5@2x.png",
"scale" : "2x"
},
{
"size" : "1024x1024",
"idiom" : "ios-marketing",
"filename" : "AppIcon-512@2x.png",
"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.