A Logo Has to Survive Six Render Sizes. Most Handoffs Only Test One.

Every brand handoff I have inherited arrived as a mark plus a folder of exports. Nobody had tested the mark at the sizes it actually gets rendered at, so the first person to need it small solved it by cropping the PNG.

Here is the number that makes this a front-end problem rather than a print problem: a browser tab paints your favicon at roughly 16×16 CSS pixels, and on a 2× display that is a 32-pixel asset being asked to carry a wordmark. Google's favicon guidance asks for an image larger than 48×48 so it can be reused across surfaces, and it accepts BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. So the asset you ship is bigger than the asset that gets seen — and the difference between those two is where logos die.

The six sizes, and what each one breaks

The useful observation is that the failure modes are different. Shrinking breaks detail. Cropping breaks composition. One-colour breaks relationships between shapes. Distance breaks weight. A single export cannot fix four different problems, which is why "send me the logo" is never a well-defined request.

Ship the icon set, not the logo

For the tab and the home screen, the deliverable is a simplified mark, not the primary lockup. Draw it once at 32 px and keep it as its own asset.

<!-- SVG favicon with an ICO fallback for the clients that need one --> <link rel="icon" type="image/svg+xml" href="/icons/mark.svg" /> <link rel="icon" type="image/png" sizes="32x32" href="/icons/mark-32.png" /> <link rel="icon" type="image/png" sizes="48x48" href="/icons/mark-48.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png" /> 

Serve mark.svg with the right type, and note that SVG favicons are not universal — the PNG sizes above are not belt-and-braces, they are the path that older and non-Chromium engines actually take.

For installability and home-screen icons, the manifest is where the size ladder becomes explicit:

{ "name": "Design Den Solutions", "short_name": "Design Den", "icons": [ { "src": "/icons/mark-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/mark-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/icons/mark-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } 

maskable matters more than people expect. A maskable icon is composited into a shape the platform chooses, so the artwork has to be built with a safe zone rather than scaled into one. Adaptive icons on Android use a 108dp canvas where only the central 72dp is guaranteed visible — which means roughly a third of the canvas width is bleed. If the mark fills the artboard, it gets cut.

Two rules that stop the drift

Measure clear space off a feature inside the artwork, not off the artboard. Artboard padding vanishes the moment anything crops to content bounds — image CDNs, social platforms, PDF exporters. A rule like "clear space equals the cap height of the wordmark" travels with the drawing because it is defined in the drawing's own units.

Draw the one-colour version; do not desaturate it. Where two shapes overlap, one colour has to resolve that overlap deliberately: knock it out, outline it, or separate the shapes. A desaturated two-tone mark keeps the overlap as a muddy third value, and that value is what turns into a blob at 16 px or in a single thread colour.

The accessibility exemption that gets over-read

WCAG 2.2 SC 1.4.11 (Non-text Contrast) requires 3:1 for the graphical objects needed to identify user interface components and their states. Its exception list includes logotypes: text that is part of a logo or brand name has no minimum contrast requirement.

That exemption is about conformance, not visibility. It exists because a logo is a fixed identity asset rather than a control a user has to operate. It does not mean the mark is legible on your shopboard at dusk, or that it survives one-colour print, or that the wordmark is readable at the size your invoice header renders it. If you assert the exemption in a review, assert it for the right object — the logotype, not the icon button that happens to contain it. An icon used as a control is still a user interface component and still needs its 3:1.

A test you can actually run in CI

You cannot automate taste, but you can automate the shrink and look at the result. A cheap way to catch regressions is to render the mark at the sizes that break it and fail the build when the asset is missing or when a raster export is smaller than its slot:

// icons.test.mjs — run after the icon build step import { expect, test } from 'vitest'; import sharp from 'sharp'; const REQUIRED = [ { file: 'dist/icons/mark-32.png', size: 32 }, { file: 'dist/icons/mark-48.png', size: 48 }, { file: 'dist/icons/apple-touch-icon-180.png', size: 180 }, { file: 'dist/icons/mark-512-maskable.png', size: 512 }, ]; for (const { file, size } of REQUIRED) { test(`${file} exists at ${size}x${size}`, async () => { const { width, height } = await sharp(file).metadata(); expect([width, height]).toEqual([size, size]); }); } 

Then add one visual check that a human actually reads. Generate the contact sheet yourself instead of trusting a design-tool zoom level:

import sharp from 'sharp'; const sizes = [16, 32, 48, 80, 180]; const composites = await Promise.all( sizes.map(async (s, i) => ({ input: await sharp('src/mark.png').resize(s, s, { fit: 'contain', background: '#fff' }).png().toBuffer(), left: i * (s + 24), top: 24, })) ); await sharp({ create: { width: 900, height: 240, channels: 3, background: '#111' } }) .composite(composites) .png() .toFile('contact-sheet.png'); 

Open contact-sheet.png at 100% zoom on the smallest screen you actually ship to. That is the squint test, and it takes about ninety seconds. It catches more bad logos than any style guide page ever written.

What to ask for at handover

One sheet: the mark at each of the six real sizes, the simplified variant used for the smallest ones, the one-colour and inverted versions, the clear-space rule stated in the artwork's own units, and a "do not reproduce smaller than" figure for screen and for print.

If you want the icon pipeline, the manifest and the contact sheet built as part of the design work rather than retrofitted after launch, that is the kind of front end we specify and ship: website development work at Design Den Solutions.

Disclosure: this article was prepared with AI assistance and reviewed for technical accuracy by Design Den Solutions. The cover image is a conceptual AI-generated illustration with the official company logo composited unchanged. Google's favicon size and format guidance and the WCAG 2.2 SC 1.4.11 logotype exception were checked against the primary sources at the time of writing.