Skip to content
Source Chapter Three. Fonts

Chapter Four. App Icons

Chapter Four. App Icons

What could be simpler than just changing an app's icon, right? Designers draw a 1024x1024 icon with a margin, we understand that for adaptive icons we need background and foreground separately, they draw that for us too, we start preparing the icon in the project.

We go to New → Image Asset in the studio, add them, look at the preview. And everything is wrong, of course. Attached a screenshot for comparison of what we got at this stage with what should be.

Why? Icons have a safe zone. According to the documentation - for a 108x108 icon, it's 72x72. Launchers and the system guarantee that these two-thirds will stay in place no matter what, and anything can happen to the remaining third: be cropped, stretched, do various parallaxes, animations, and so on.

All this is logical, but a bit counterintuitive in production. The designer should have initially drawn the layout so that 66.6% of it was the desired icon. Both the logo on the foreground and the background. When I lived almost my whole life with icons on some solid or tiled background, I didn't even think about it.

Twisting the scaling slider in Asset Studio is a thankless task. You won't hit what the designers wanted. And it won't help anyway. From Full Bleed Layers, you'll see that there's emptiness outside the background, and there will surely be a tricky scenario where the user will see this emptiness someday.

Bottom line: icons had to be drawn not on a 1024x1024 canvas, but on 1536x1536. But only the content-cropping mask should scale from the original icon; everything else stays in this 1024x1024 square in the middle. And only this way will the final icon after cropping correspond to the original layout.

Image 2