Posted onJun 29, 2019 • Originally published atwalkingriver.com

Making Icons for a Capacitor/iOS Application

#ionic #capacitor #ios

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 myIonic 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.pngsips -z 40 40 --out ./AppIcon.appiconset/AppIcon-20x20@2x-1.png icon.pngsips -z 40 40 --out ./AppIcon.appiconset/AppIcon-20x20@2x.png icon.pngsips -z 60 60 --out ./AppIcon.appiconset/AppIcon-20x20@3x.png icon.pngsips -z 29 29 --out ./AppIcon.appiconset/AppIcon-29x29@1x.png icon.pngsips -z 58 58 --out ./AppIcon.appiconset/AppIcon-29x29@2x-1.png icon.pngsips -z 58 58 --out ./AppIcon.appiconset/AppIcon-29x29@2x.png icon.pngsips -z 87 87 --out ./AppIcon.appiconset/AppIcon-29x29@3x.png icon.pngsips -z 40 40 --out ./AppIcon.appiconset/AppIcon-40x40@1x.png icon.pngsips -z 80 80 --out ./AppIcon.appiconset/AppIcon-40x40@2x-1.png icon.pngsips -z 80 80 --out ./AppIcon.appiconset/AppIcon-40x40@2x.png icon.pngsips -z 120 120 --out ./AppIcon.appiconset/AppIcon-40x40@3x.png icon.pngsips -z 512 512 --out ./AppIcon.appiconset/AppIcon-512@2x.png icon.pngsips -z 120 120 --out ./AppIcon.appiconset/AppIcon-60x60@2x.png icon.pngsips -z 180 180 --out ./AppIcon.appiconset/AppIcon-60x60@3x.png icon.pngsips -z 76 76 --out ./AppIcon.appiconset/AppIcon-76x76@1x.png icon.pngsips -z 152 152 --out ./AppIcon.appiconset/AppIcon-76x76@2x.png icon.pngsips -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.