--- title: Hassle free PWA icons and splash screen generation published: true description: How I managed to generate icons and iOS splash screens in various resolutions and aspect ratios for my first progressive web application tags: pwa, js, icon, splash image cover_image: https://thepracticaldev.s3.amazonaws.com/i/h180kbeceu28sgn1xs8o.png --- Recently I created my first progressive web application (PWA). Partly because I couldn't find any free one on Apple Store that would suit me, partly because I tried to convince a friend of mine that it is much faster and better to maintain than native mobile apps. I'm mostly back-end developer so it's always fun and relaxing to hack something with technologies I don't work with on daily basis. All the coding was fun, mostly because I used great tools, mainly [Vue CLI](https://cli.vuejs.org/) that comes with a great [PWA template](https://github.com/vuejs-templates/pwa) that allows you to start working on a project almost instantly, instead of figuring out the boilerplate yourself. I run into some issues though. First surprise came when I found out that [localStorage in PWA differs](https://stackoverflow.com/questions/11545149/ios-web-app-has-different-localstorage-than-mobile-safari) when the app is opened from home screen and when is opened in a browser. Well, just don't let people use your app in a browser, make them use the PWA version. Done. Second one was how iOS Safari calculates the viewport height, which made layout creation in CSS a real pain. In short: it puts its own toolbar over your carefully positioned app navigation bar. I experimented with this [buggyfill](https://github.com/rodneyrehm/viewport-units-buggyfill), it worked nice, but it made me realize I want to focus on the app functionality and not rendering details, so I adopted [Framework7](https://framework7.io/) into the project that took care of this issue. Done. But to my surprise **the biggest challenge of creating a simple PWA was to populate it with icons** in all the resolutions various devices/OSes require. There are these 512 and 192 pixels PNG icons that Chrome DevTools validates, then there are 32 and 16 pixels favicons, and various resolutions for all the iOS devices. So far so good, it's just a square in a different resolutions. Done. Then you find out that there is a `` HTML tag that you can use so users of your app won't stare at white screen while your app is loading. But you need to **create said startup image for each iOS device that is out there**, all of them having different resolution and display aspect ratio. So you can't just scale down one high resolution PNG anymore. And even worse, you can't just use one resolution and hope iOS will rescale it and use it on every screen. Well you can hope, but will be disappointed. This works with app icons though (I ended up having just the 180x180px version, all the devices seem to work fine with that). Luckily Apple has it covered and gives you an [overview of all the resolutions](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen#static-launch-screen-images) in on handy table. So all the theory was in place all that was left to do was to create my app icon in various resolutions. How do I do that? I'm no graphic designer. I don't want to use online tool and then manually download the generated files into my project. I don't want to use ready made solution with dozen dependencies that outputs like gazillion files you need manually go over and cherry pick. Heck, I am a web developer, there must be a better way how to transform this: ![PWA icon](https://thepracticaldev.s3.amazonaws.com/i/29elzout5l42wr7tr214.png) ...into this: ![PWA splash image](https://thepracticaldev.s3.amazonaws.com/i/j6lrv3tue1egy3aoo160.png) Then it hit me! These **graphics with various aspect ratios and resolutions are nothing more than just very simple responsive web page** with one image (SVG respectively). Luckily I created the logo as a vector graphic in the beginning. So here is a template to scalable web application icon that adapts to any screen size and orientation: ```html

``` Just take screenshots in various viewport size and there you have it! **Well, don't be silly, don't do it by hand. Automate it!** Sprinkle it with a little Node script that takes the screenshots for you (it uses [Webshot CLI](https://www.npmjs.com/package/webshot-cli) available via NPM). ```js const { exec } = require('child_process') const util = require('util') const sizes = [ { name: 'favicon-16', size: '16/16' }, { name: 'favicon-32', size: '32/32' }, { name: 'apple-icon-180', size: '180/180' }, { name: 'pwa-icon-192', size: '192/192' }, { name: 'pwa-icon-512', size: '512/512' }, { name: 'apple-splash-640', size: '640/1136' }, { name: 'apple-splash-750', size: '750/1334' }, { name: 'apple-splash-1242', size: '1242/2208' }, { name: 'apple-splash-1125', size: '1125/2436' }, { name: 'apple-splash-1125', size: '1125/2436' }, { name: 'apple-splash-1536', size: '1536/2048' }, { name: 'apple-splash-1668', size: '1668/2224' }, { name: 'apple-splash-2048', size: '2048/2732' }, ] sizes.map(item => { exec(util.format( 'npx webshot --window-size=%s ./src/assets/logo/logo.html ./static/img/icons/%s.png', item.size, item.name )) }) ``` One SVG, one HTML, one Node script and one locally installed NPM package. That's all it took to generate this plethora of PWA graphics: ![PWA graphics](https://thepracticaldev.s3.amazonaws.com/i/h180kbeceu28sgn1xs8o.png) Thanks for reading! And since this is my first post here in this lovely community, I would appreciate any feedback. Happy hacking you all!

dominikfiala

Hassle free PWA icons and splash screen generation

Join Our Newsletter. No Spam, Only the good stuff.