An app icon spends almost none of its life at the size you design it. You build it as a 1024-pixel square, you admire it as a 1024-pixel square, and then it goes out into the world as a rounded tile roughly a hundred pixels wide, sitting on a wall of other tiles, glanced at for a fraction of a second. So the honest place to judge an icon is not the canvas it was drawn on — it is the home screen it has to survive. This is a first-hand account of finalizing the icon for Boardlore, our multi-tradition board-game app, and of one plain discipline that kept overruling our own taste: mask every candidate to the iOS squircle, shrink it to thumbnail size, and only then decide.
The icon we had, and why we went looking
The shipped candidate was a gold knight on dark wood. At full size it is genuinely good — warm, premium, sharp, on-brand for a studio that likes restraint. The problem is not that it is ugly; it is that it is narrow. A lone chess knight says ‘chess,’ and specifically Western chess, when Boardlore is twenty traditions in one app: chess and Shogi, Xiangqi and Go, Janggi, Makruk, Shatranj, and more. The icon was undersell as much as anything — a beautiful label on the wrong drawer. So we went looking for an icon that carried the breadth without turning into a crowded museum wall. We went looking, in other words, for a reason to replace an icon that was already working, which is exactly the situation where it is easiest to talk yourself into a downgrade.
Three concepts, one brand
We generated three multi-tradition concepts with OpenAI’s GPT Image, holding every one of them to the same gold-on-dark-wood palette so the choice was about idea, not finish. Concept A was a globe with a knight — the world of board games, framed like a picture. Concept B was a pinwheel: one piece from each tradition — the knight, the Shogi pentagon, the Xiangqi octagon, the Go stone — radiating from a shared center. Concept C was an open book, a chessboard on one page and a Go board on the other, with a single knight standing at the spine. All three were handsome at 1024 pixels. That was the trap, not the win: a concept that looks good on the canvas has cleared the easiest bar there is.
The only test that mattered: shrink it
iOS does not show your square. It masks the art to a superellipse — the rounded ‘squircle’ whose corners curve at roughly 22% of the icon’s width — and it renders that tile small, next to every other app the player owns. Apple asks you to hand over a full-bleed 1024-pixel square and applies the mask itself; the shape you are actually judged on is not the shape in your editor. So we did the two things the editor never does for you: we masked each candidate to that squircle and shrank it to home-screen size. Then we simply looked. To be clear about what this was — a designer’s eye on masked thumbnails, not an A/B test, not tap data, not a study we are going to dress up as one — it was a visual legibility check, and that was enough to settle it.
The verdicts came fast, and they did not match the 1024-pixel rankings. Concept B, the pinwheel, was the biggest casualty: four distinct silhouettes competing for the same few dozen pixels blurred into an unreadable smudge, a brown pinwheel of nothing. Concept A lost to its own frame — the picture-border ate the tile from the outside in, and the globe at the middle collapsed to a dot. The original lone knight, tellingly, was the punchiest thumbnail of the lot: one bold shape, instantly readable small — and still saying the one thing we were trying to stop it saying. Only Concept C, the open book, carried the idea and came through the shrink with its meaning intact. But even C did not survive as first drawn. It survived after we redrew it for the size it would live at.
Concept and legibility are two different tests
The shrink test taught us the thing we should have known going in: an icon has to pass two exams, and they are not the same exam. The first is concept — does the tile say the right thing about the app? The second is legibility — can you still read whatever it says at the size it actually appears? Concept B aced the first and failed the second: it said ‘many traditions’ loudly at 1024 and said nothing at all at 120. The original knight was the mirror image — flawless legibility, wrong message. A candidate that only clears one exam is not a near-miss you can polish into a pass; it is failing a different subject each time. Only Concept C had a credible path through both, and the path ran straight through a redraw.
Redrawing the winner for 120 pixels
Refining C was not about making it prettier; it was about spending every pixel where a thumbnail can use it. We made the book bigger, so it filled most of the tile instead of floating in polite margins. We coarsened the board — a chunky five-by-five checker instead of a fine eight-by-eight grid, because a fine grid is precisely the kind of high-frequency detail that dissolves into flat grey when the renderer shrinks it. We cut the internal linework down to fewer, bolder strokes. And we replaced the finely-rendered knight with one bold central knight built from shapes heavy enough to read at a glance. Then we generated the refined variants and chose the one we came to call ‘big book, central knight.’ Every change was the same change, really: trade resolution you will never see for contrast you always will.
The payoff we had not planned for was the name. Boardlore is board plus lore — an anthology, a book, of the world’s board games — and an open book is that idea drawn literally, the one concept of the three that says the product name and the product promise in the same shape. Better still, the two pages are two different boards, a chess grid and a Go grid, so the tile signals breadth the lone knight had hidden — and it does it with two coarse, high-contrast patterns that happen to survive shrinking beautifully. Concept and legibility, which had been pulling against each other across every other candidate, finally landed on the same side.
The honest close: design at the size it ships
The lesson is not ‘the book concept was best’ — it is that we would have picked the wrong icon if we had judged any of them on the canvas. A gorgeous 1024-pixel render tells you almost nothing about the artifact players meet, because the artifact players meet is small, masked, and surrounded. So design at the size it ships: mask to the squircle, shrink to a thumbnail, and let the home screen cast the deciding vote. Test concept and legibility as two separate questions, because a tile can be brilliant at one and mute at the other. Coarsen on purpose — fine detail is a cost you pay at full size and a liability everywhere else. And do not replace a strong icon reflexively: our lone knight nearly won on legibility alone, and it was worth proving the replacement beat it small before we let taste retire it. That last point is the same discipline we hold every fix to — a thing that looks right in the tool is a theory until you have watched it hold up in the real conditions, the sibling lesson to the day the browser told the truth about a bug our theory had gotten wrong. The rest of how we build, and where it breaks, is on the WizusLabs Engineering blog — including the wider craft of making a game readable to everyone, in designing games colorblind players can actually play. An icon is the smallest thing you ship and the first thing anyone sees; it deserves to be judged where it lives.
Notes
This is a first-hand devlog about finalizing the app icon for Boardlore, a board-game app this studio is building and has announced but not yet released. It contains no performance metrics, download figures, or engagement numbers, and the comparison it describes was a qualitative visual legibility check — a designer’s eye on candidates masked to the icon shape and shrunk to home-screen size — not an A/B test, tap-through study, or any quantitative measurement. We are not going to invent one to look rigorous; the point of the piece is a design discipline, not a statistic. The concrete specifics are drawn from the work itself: source art authored at 1024 pixels, judged at roughly a home-screen thumbnail size; three concepts generated with OpenAI’s GPT Image on a shared gold-on-dark-wood palette (globe-and-knight, a radiating pinwheel of tradition pieces, and an open book with a chess page and a Go page); and a refinement pass that coarsened the board to a chunky five-by-five checker and centered a single bold knight. The one figure that is not our own observation — that iOS rounds an icon to a superellipse at roughly 22% of its width — is a community-measured approximation of Apple’s mask, not a number Apple publishes; what Apple does document is that you submit a full-bleed 1024-pixel square and the system applies the rounded-rectangle mask for you, cited below. The two figures are our own renders of the actual candidates and the refined icon — masked to the squircle and shrunk exactly as described, the concepts generated with OpenAI’s GPT Image and composed by us. They are screenshots of the work, not data.
Sources
- Apple — Human Interface Guidelines: App icons (design a 1024×1024-pixel image; the system applies the rounded-rectangle / masked shape and renders the icon at many sizes — so you should not bake in the corners yourself).
- Apple — Human Interface Guidelines: Images — icon sizes (the range of small sizes an app icon is scaled to across the system, which is why thumbnail legibility, not full-size polish, decides).
These references support only the general iOS icon-authoring mechanics named above — the 1024-pixel source, the system-applied mask, and the small sizes an icon is rendered at. The concepts, the shrink test, the verdicts, and the redraw are our own first-hand account, and the comparison was qualitative, not measured.
Keep reading: all posts on the WizusLabs Engineering blog.