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. Now we want to export the maskable icon, so we activate this background layer:īecause the layer is outside of our page, we are now exporting a document, not a page. 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. These are the settings for export, they are set by default and are quite good: In our case, the background is white, so enable this layer: 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). 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. Since our page is square, it's not filled (i.e. We are exporting a page, not a document or selection: We disable the other two square backgrounds and enable this one: For this purpose we have another round background layer. For a special look, we want it to be on a white background this time, round like a logo. As decided, it should be a PNG sized 48x48 pixels.
Faviconįirst we want to create a favicon. 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. Place a background layer of the same size - the background color depends on your logo, in our case it is white. Let's startĬreate 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. I show an example with open source Inkscape. However, you can find some useful tips for your own workflow. This is a fairly individual workflow and this article is mainly for personal notes. This workflow was created to make it easy to export icons for multiple websites. This is a supplementary article to The Complete Guide to Favicons and App Icons 2022.
0 kommentar(er)
