How to Automate Icons Production for Your App With Inkscape

Quick summary ↬ This is a personal note on how to efficiently automate icon creation with Inkscape, but you may find some helpful tips for yourself here.
Posted , by Denis Sokol

This is a supplementary article to The Complete Guide to Favicons and App Icons 2022. This workflow was created to make it easy to export icons for multiple websites. This is a fairly individual workflow and this article is mainly for personal notes. However, you can find some useful tips for your own workflow. I show an example with open source Inkscape.

Let's start

Create a square page and place your logo with small margins, but not large margins, otherwise you will lose a lot of space for apple-touch-icon and favicon. Place a background layer of the same size - the background color depends on your logo, in our case it is white. Add another layer for a maskable icon - it also needs to be a square background (again in our case white) and here's the trick - yes, it's outside of your page! How do I find out how much free space is needed for the maskable icon? You can see the proportions in the screenshot, or you can test your result here and adjust, or you can test it directly in the browser - see the screenshots in the Icons 2022 Summary chapter of this article.

How to design icons for website 01

Favicon

First we want to create a favicon. As decided, it should be a PNG sized 48x48 pixels. For a special look, we want it to be on a white background this time, round like a logo. For this purpose we have another round background layer. We disable the other two square backgrounds and enable this one:

How to design icons for website 02

We are exporting a page, not a document or selection:

How to design icons for website 03

We resize to 48px and export to PNG. Since our page is square, it's not filled (i.e. transparent) and we have this white circle in the background, we'll get the result we want - a round icon that will be round in both dark and light themes.

How to design icons for website 04

Apple touch icon

This one should be square and shouldn't be maskable, and I'm pretty sure it shouldn't have a transparent background (see my research on icons with transparent backgrounds and their behavior on the iPhone). In our case, the background is white, so enable this layer:

How to design icons for website 05

and export again as a 192px page:

How to design icons for website 06
 

and we get the following result:

How to design icons for website 07

These are the settings for export, they are set by default and are quite good:

How to design icons for website 08

I've noticed that sometimes a PNG is too big when exported from Inkscape, so you probably need to re-export it with some other software you have, like Photoshop.

Maskable icons for the manifest file

Now we want to export the maskable icon, so we activate this background layer:

How to design icons for website 09

Because the layer is outside of our page, we are now exporting a document, not a page. First we want to export the SVG. The width you set doesn't matter because it's a vector - it will set the width/height to match the page, but again you don't care. Plain SVG works fine for me and I don't know why unchecking "Hide export settings" would actually hide them if it should be the other way around:How to design icons for website 10

Anyway, when I open this SVG, I see some issues with the viewBox and sizes, and I want to fix it manually:

How to design icons for website 11

And then it's up to you to decide how to get two more PNG icons - 512x512 px and 192x192 px. You can either import your SVG into Photoshop and export from there because you see that Inkscape creates too big file and/and you need a control settings (but use PNG24 and be careful with transparency) or you can export directly from Inkscape like this :

How to design icons for website 12

and here is the result (the dark area is not part of the icon, as in all cases above):

How to design icons for website 13

Non-maskable (any or regular) icons for the manifest file

The layer setup is actually the same as for the favicon - see screenshot 2 because we want a round white background. And the export dialog for PNG is the same as there - see screenshot 3. We only change the dimensions. Yes, and everything else for SVG is similar, but okay, let's repeat.

How to design icons for website 14
How to design icons for website 15
How to design icons for website 16

Finally, if you ever need a transparent background for the masked icon, you select the hidden(!) background layer and export the selection:

How to design icons for website 17

Read more Progressive Web App articles:

Posted