Branding

Generators for the artefacts a brand is delivered as — a specification sheet, a favicon set, a QR code — that verify their own output. The verification is the point: a favicon is designed at 512 pixels and seen at 16, and a QR code with a logo on it either decodes or it does not.

The things that carry a brand outward — a sheet you can hand a client, a QR code that will actually scan, a favicon that still reads at sixteen pixels.

Each one checks its own output. The brand sheet generates the approved-combinations matrix nobody else produces; the QR tool measures how much of the code your logo can cover before it stops decoding.

Anything can resize a logo into six files or draw a QR code. What almost nothing does is tell you whether the result works. A favicon is designed at 512 pixels and seen at 16 — that is 256 pixels in total, not enough for a wordmark or a thin stroke. A branded QR code with a logo over the middle either decodes or it does not, and error correction has no graceful middle: it works right up to the last survivable module and then fails completely.

So these tools measure. The favicon generator reports how much of your mark’s structure survives the downscale and checks it against both light and dark tab strips. The QR generator shows the error-correction budget your logo is consuming, and grades contrast under ISO/IEC 15415 — the standard that actually governs symbol scanning, rather than WCAG, which governs text for human eyes and is what most pages wrongly quote.

• The approved-combinations matrix

  A grid of every brand colour over every other, with the measured ratio and a verdict, and a substitute for each failing pair found by holding the hue and searching the lightness axis. Real brand guidelines contain this section; generated ones do not.

  UCLA, GOV.UK, IBM Carbon and Scope all publish one, and UCLA marks its failures “DNP” — does not pass. Every one of those grids was built by hand.

• A logo budget in place of the 30% myth

  The claim that a logo may cover 30% of a QR code misreads the standard. Level H allows recovery of 30% of the symbol’s codewords, which is not 30% of its visible area: function patterns carry no correction at all, a partially clipped codeword counts as a total loss, and correction is applied per interleaved block rather than pooled across the symbol.

  Measured for a typical URL: about 4% of the area at level L, 9% at M, 14% at Q and 19% at H.

• Favicons judged at the size they are seen

  The tool reports how much of the mark’s structure survives the downscale and renders it at actual size against both tab strips, because a near-black icon that reads perfectly in a light browser can disappear in dark mode.

  A 16-pixel favicon is 256 pixels in total. The set still read by anything current is a 32px ICO, a 180px PNG for iOS, and 192 and 512px PNGs for the web manifest.

• Static codes, so nobody can switch them off

  The destination is encoded in the pattern itself. There is no redirect in the middle, no account to keep alive and nothing that expires — which matters most for anything printed, where the code cannot be reissued.

  One major generator’s own help centre states that a deactivated dynamic code cannot be revived even by creating a new code with the same content.

1. 1

   Fix the palette before you document it

   A brand sheet that records a failing pair has published the failure. Do the contrast work first, so that what the document states is already true on the day it is handed over.

2. 2

   Generate the matrix, then read the failures

   The interesting rows are the ones marked as failing, and the useful column is what to use instead. A substitute found along the lightness axis still reads as the brand, which is the only reason the failure is solvable.

3. 3

   Keep the type to two families

   One for headings, one for body, with the size correction stated between them. A guideline that lists five families is a guideline nobody will follow.

4. 4

   Test the marks at their real sizes

   Check the favicon at 16 pixels on both tab strips, not at 512 on a white artboard. If the wordmark collapses, the answer is a different mark — a single letter or a cropped fragment — rather than a better export.

5. 5

   Encode the code and read its margin

   Printing it and scanning it once tells you which side of the cliff you are on and nothing about how close to the edge. Read the budget figure instead, and leave headroom for a worn print, a steeper angle and a cheaper camera.

• You are printing a QR code

  QR code generator

  It reports the scan distance for your module count and grades contrast under the standard that governs symbols, not the one that governs text.

• You are putting a logo on a QR code

  QR code generator

  The budget meter shows how much error correction the logo is consuming, which is the number that decides whether it decodes.

• You need a favicon set

  Favicon generator

  Every size, plus a check that the mark still reads at sixteen pixels against both light and dark tab strips.

• You are handing a palette to a client

  Brand sheet generator

  The approved-combinations matrix: which colours may be set on which, with the measured ratio for every pair.

• A logo can cover about 4% of a QR code’s area at error-correction level L, 9% at M, 14% at Q and 19% at H — not the 30% commonly claimed, which describes codewords rather than area.

• Reed–Solomon correction has no graceful degradation: measured across roughly 5,000 decode attempts, a symbol decoded 100% of the time up to the last survivable module and 0% one module later.

• Styling the three corner finder patterns drops the measured scan rate to 60% and keeps it there at every error-correction level, because locating the symbol happens before any correction runs.

• A 16-pixel favicon is 256 pixels in total, which is not enough for a wordmark or a thin stroke.

• Reference

  Palette library

  Curated sets, each with its audit shown.

• 9 tools

  Colour

  Check it, fix it, extract it, turn it into a system.

• 4 tools

  CSS

  Gradients and surfaces as CSS you paste, measured as they will paint.

• 3 tools

  Typography

  Pairing, scale, readability and font identification — measured the same way.

• 6 tools

  Writing

  Resumes, cover letters, word counts and interface copy, held to the same standard as the pixels.

• 15 tools

  PDF

  Merge, split, protect and convert — none of it uploaded.

• 3 tools

  Video & audio

  Trim, extract and convert — decoded by your own browser, not a server.

• 14 tools

  Converters

  Change a file’s format or size, or a length’s unit, without anything leaving your device.