I recently upgraded one of my mobile games to Ionic 4 and Capacitor. One of the shortcomings I discovered was the lack of a simple tool to create the icons and splash screens. I imagine the Ionic team will eventually recitify this situation, but in the meantime I wanted to find an alternative. Given that I can be a cheap guy at times, I figured it would be best to build my own solution.
You can read about my Ionic 3 - 4 and Capacitor experience here.
I started with a PNG file of 1280x1280 pixels. I knew the Mac had some built-in command line tools that would do the heavy lifting for me, and Xcode provided me the file names and sizes I needed to generate. Armed with that informtation, the rest was easy.
Here is my admittedly-simple shell script.
##################################################################
# Make a bunch of iOS App icons from a Master
# Given an image at least 512x512 pixels named icon.png, resize and create a
# duplicate at each specified size. Add new sizes as needed. When finished,
# copy the resulting images into your Xcode iOS project.
mkdir ./AppIcon.appiconset/
sips -z 20 20 --out ./AppIcon.appiconset/AppIcon-20x20@1x.png icon.png
sips -z 40 40 --out ./AppIcon.appiconset/AppIcon-20x20@2x-1.png icon.png
sips -z 40 40 --out ./AppIcon.appiconset/AppIcon-20x20@2x.png icon.png
sips -z 60 60 --out ./AppIcon.appiconset/AppIcon-20x20@3x.png icon.png
sips -z 29 29 --out ./AppIcon.appiconset/AppIcon-29x29@1x.png icon.png
sips -z 58 58 --out ./AppIcon.appiconset/AppIcon-29x29@2x-1.png icon.png
sips -z 58 58 --out ./AppIcon.appiconset/AppIcon-29x29@2x.png icon.png
sips -z 87 87 --out ./AppIcon.appiconset/AppIcon-29x29@3x.png icon.png
sips -z 40 40 --out ./AppIcon.appiconset/AppIcon-40x40@1x.png icon.png
sips -z 80 80 --out ./AppIcon.appiconset/AppIcon-40x40@2x-1.png icon.png
sips -z 80 80 --out ./AppIcon.appiconset/AppIcon-40x40@2x.png icon.png
sips -z 120 120 --out ./AppIcon.appiconset/AppIcon-40x40@3x.png icon.png
sips -z 512 512 --out ./AppIcon.appiconset/AppIcon-512@2x.png icon.png
sips -z 120 120 --out ./AppIcon.appiconset/AppIcon-60x60@2x.png icon.png
sips -z 180 180 --out ./AppIcon.appiconset/AppIcon-60x60@3x.png icon.png
sips -z 76 76 --out ./AppIcon.appiconset/AppIcon-76x76@1x.png icon.png
sips -z 152 152 --out ./AppIcon.appiconset/AppIcon-76x76@2x.png icon.png
sips -z 167 167 --out ./AppIcon.appiconset/AppIcon-83.5x83.5@2x.png icon.png
As I said, pretty straightforward. With a little more time, I could probably come up with something more elegant, but this brute-force solution works well enough. It assumes you have a PNG file named icon.png, and it should be at least 512x512.
Feedback Appreciated
Do you have any comments or questions? Did I make any mistakes in this post? Let me know on Twitter. I'm @walkingriver.
Top comments (0)