The app icon is the only asset on a Shopify listing that Shopify states a file format for: 1200 × 1200 pixels, JPEG or PNG. It is also the only one nobody ever sees at the size it was drawn.

A merchant meets the icon in a search result, in a category row, in the list of installed apps and in the admin sidebar. In every one of those places it is small. The file is 1200 pixels wide and the impression is a fraction of that, which makes the icon the one asset where the work is subtraction.

What survives the reduction

Reduce anything far enough and only three properties remain: the silhouette, the contrast, and the number of things in it. Everything else - a gradient, a stroke of two pixels, a shadow, a piece of text - resolves into grey.

So an icon that works is usually one shape on one ground, with a hard edge between them. Two colours, not five. One idea, not a scene.

The test costs nothing. Export the icon, put it beside the app name at the size of a favicon, and look at it from where you normally sit. If you have to lean in, it is too busy, and no amount of detail at 1200 pixels will fix that.

What does not survive it

Three habits, in order of how often they turn up.

A screenshot in a square. The interface reduced to 48 pixels is a grey rectangle with lighter grey rectangles inside it. Every app that does this has the same icon.

A wordmark. Twelve letters at that size are a smear. If the brand is a word, use its first letter, drawn as a shape rather than set as type.

The whole logo, lock-up and all. A logo with a symbol, a name and a tagline was designed for a website header. The icon slot needs the symbol on its own, redrawn to fill the square rather than floating in the middle of it with a website's worth of clear space around it.

What Shopify refuses inside the icon

Two things, and both are easy to do by accident.

A price may not appear anywhere in a listing image, and the icon is a listing image. A "from $9" badge in the corner is refused.

Shopify's own trademarks may not appear in your icon. The shopping-bag mark, the wordmark, the green: an icon that borrows them to say "this is for Shopify" is saying something Shopify has not agreed to.

The square is not the rectangle

The icon and the feature image are drawn for different jobs and it is worth being blunt about it. The feature image at 1600 × 900 has room for a sentence and a picture of the product. The icon has room for one shape.

The mistake is to design the rectangle first and then crop it into the square. What comes out is a fragment of a composition: half a headline, a piece of a card, a colour with no shape in it. Draw the square as its own thing, and let it share nothing with the rectangle except the palette.

One practical order

  • Draw the shape in black on white first. If it does not read there, colour will not save it.
  • Add one accent colour. Stop.
  • Fill the square. The mark should sit inside a small, even margin, not float in the middle at half size.
  • Export at 1200 × 1200 and view it at a quarter of an inch on your screen.
  • Put it next to the icons of the three apps that rank above you for your keyword. If it disappears in that row, redraw it - and that is a design fault, not a taste one.

The icon is the cheapest asset on the listing to get right and the most expensive to get wrong, because it is the one a merchant sees before they have decided whether to look at anything else.