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)
