A logo is approved as one drawing, and then it has to fit a website header, a square avatar, a 16 pixel browser tab, an embroidered cap and a dark photograph. One file cannot do all of that, so every identity ships as a small family of variations. Deliver too few and the client squeezes the full lockup into an avatar; deliver too many and they pick at random. This guide covers each variation and where it is used, how many a client needs, how to name and document them, and the usual mistakes.
The types of logo variations
Logo variations run along two axes: the shape, meaning which elements appear and how they are arranged, and the colour version. Every shape exists in every colour version, so the file count grows quickly.
| Variation | What it is | Where it is used |
|---|---|---|
| Primary logo | The full lockup, usually symbol and name, as approved | The default wherever it fits: website header, signage, letterhead, packaging |
| Horizontal lockup | Symbol beside the name, wide and short | Website headers, email signatures, narrow strips |
| Stacked lockup | Symbol above the name, close to square | Social posts, packaging fronts, merchandise, posters |
| Logomark (symbol) | The symbol on its own | Social avatars, app icons, patterns, embossing, small spaces |
| Logotype (wordmark) | The name in its lettering, without the symbol | Footers, partner strips, pens, small merchandise |
| Submark | A compact secondary mark: initials, a monogram or a badge | Stickers, stamps, seals, packaging details |
| Favicon and app icon | The logomark simplified for fixed pixel sizes, on a square | Browser tabs, bookmarks, home screens, app stores |
| Full colour | The logo in its brand colours | Light backgrounds, on screen and in four-colour print |
| One colour | The whole logo in a single brand colour or spot ink | Screen printing, embroidery, foil, engraving |
| Black | The logo in solid black | Black and white print, forms, invoices |
| White (reversed) | The logo in white | Dark backgrounds, photographs, brand-colour panels |
| Small-size version | A version simplified or redrawn to hold at small sizes | Below the primary's minimum size, down to the favicon |
A primary logo that joins a symbol and a name is often called a combination mark, and it is usually either the horizontal or the stacked lockup.
Primary and secondary logos
The primary logo
The primary logo is the version the brand was approved in and the one people should reach for first. Guidelines should say so plainly: use the primary whenever it fits at or above its minimum size, and switch to another variation only when it does not. That one rule removes most of the guesswork.
Secondary lockups
A secondary logo is the same symbol and name rearranged for a different shape of space. If the primary is horizontal, the secondary is usually stacked, and the reverse: horizontal for headers and email signatures, stacked for social posts, box fronts and tote bags.
A secondary lockup is not a redesign. Keep the same symbol and the same lettering; only the arrangement and the gap change, and that gap should be defined the way clear space is, as a fraction of the mark. If the stacked version needs a different ratio between symbol and name, decide it once in the master file and never rebuild it by eye.
Logomark, logotype, submark and favicon
Logomark
The logomark, or symbol, stands for the brand where the name does not fit or is already present: a profile avatar, an app icon, a pattern, a blind emboss. A new symbol may not be recognisable alone yet, so say where it may stand alone and where the name must be nearby.
Logotype
The logotype, or wordmark, is the name in its lettering, used where the symbol would be redundant or too small to read: running footers, partner strips, a pen. Wordmark-only identities usually take an initial or a monogram as their compact version.
Submark
A submark is a compact secondary mark: initials, a monogram, a circular badge built from the name. It suits hospitality, fashion and small product brands that print stickers, stamps and labels. If the client has no place for it, do not invent one.
Favicon and app icon
The favicon and app icons come from the logomark but follow fixed pixel sizes: 16, 32 and 48 px in the favicon.ico, an SVG favicon, a 180 px Apple touch icon, and 192 and 512 px icons for the web app manifest. At 16 px most symbols lose detail and need a simplified drawing. App icons are full squares that the platform masks into its own shape, so the mark needs padding and an opaque background.
Colour versions and small sizes
Full colour, one colour, black and white
Full colour is the default on light backgrounds. One colour is for processes that lay down a single ink, such as screen printing, embroidery, foil or engraving; specify it as a spot colour where the brand has one. Black covers black and white print and any place where colour is not allowed. White, also called the reversed version, is for dark backgrounds and photographs.
Flat versions matter most for logos with gradients or overlapping colours: if you do not draw one, a supplier will, badly, the first time the logo is embroidered.
Responsive and small-size versions
Below a certain width the full lockup stops reading. A responsive logo system answers with stages: the full lockup when there is room, then a shorter lockup or the logotype, then the logomark, then the favicon. A small-size version answers differently, by keeping the same elements and redrawing them with thicker strokes and more open counters. Either way, write down the switch points, for example "below 30 mm, use the logomark", and base them on tests rather than habit; minimum logo size covers how to find them.
How many logo variations a client needs
The answer depends on how many people will place the logo and in how many kinds of space, not on the size of the project.
| Small client | Larger client | |
|---|---|---|
| Shapes | Primary lockup, logomark, logotype | Primary, horizontal and stacked lockups, logomark, logotype, often a submark |
| Colour versions | Full colour, black, white | Full colour, one colour with spot references, black, white |
| Small sizes | Favicon set from the logomark | Small-size versions, a responsive sequence, favicon and app icons |
| Extras | None | Co-branding lockups, sub-brand lockups, an animated logo |
For a café, a consultant or an independent shop, three shapes in three colour versions, nine artworks plus the favicon set, cover the next few years. Add a secondary lockup only when the primary is strongly wide or tall and the client has a named use for the other shape, such as square social posts for a long horizontal logo.
A larger client with a marketing team, agencies and suppliers needs more, because more people place the logo without you. Even then, every variation should earn a line in the "Where it is used" column of the first table; if you cannot write that line, drop it.
How to name and document logo variations
Naming
Pick one word for each variation and use it everywhere: artboards, files, folders and the guidelines. If the guidelines say "white", the file is not "reversed" and the folder is not "knockout". A dependable pattern is brand, shape, colour: acme-logomark-white.svg, acme-logo-stacked-black.pdf. Name the artboards this way and the exports carry the right names.
Documenting
The guidelines need a logo versions section that shows each variation on its own, labelled with its name, its use and its minimum size, followed by the colour versions on the backgrounds they are meant for. Add an order of preference, primary first, so the reader knows what to try when the first choice does not fit. Give each shape its own clear space, since a stacked lockup and a logomark do not share the same proportions; logo clear space in Illustrator shows how to measure it. For the rest of the document, see what to include in brand guidelines.
Common mistakes with logo variations
Too many lockups
Six arrangements of one logo look thorough in a presentation and produce inconsistency in use, because the client picks whichever file is open. Fewer variations, each with a clear use, get applied more consistently.
A stacked version that never gets used
Stacked lockups are often drawn because a template has a slot for one. If the client's spaces are a website header, invoices and a shop sign, the stacked version will never leave the folder. Check where the logo will appear before adding a shape.
A white version never checked on a dark background
Turning every fill white does not make a reversed logo. Shapes that were white inside the colour version, a letter cut out of a circle for instance, become a solid blob unless they are knocked out to transparent. Thin strokes also look thinner when light sits on dark. Place the white version on the darkest colour of the palette, on black and on a busy photograph before you deliver it, and adjust the drawing if it fails.
No rule for which version goes on which colour
Full colour on a mid-tone brand colour often fails on contrast. State which version goes on each colour of the palette, and show it.
Questions
What are the main types of logo variations?
The primary logo, secondary lockups (horizontal or stacked), the logomark, the logotype, an optional submark and the favicon or app icon. Each shape then exists in full colour, one colour, black and white, and most brands also need a rule for small sizes.
What is the difference between a primary and a secondary logo?
The primary logo is the default version, used whenever it fits. A secondary logo is the same symbol and name rearranged for a different space, usually stacked when the primary is horizontal, or the reverse. It is not a different design.
How many logo variations does a brand need?
A small client usually needs three shapes, the primary lockup, the logomark and the logotype, each in full colour, black and white, plus a favicon set. Larger organisations add secondary lockups, one-colour spot versions, small-size versions and co-branding lockups, each with a stated use.
Is a reversed logo the same as a white logo?
In most guidelines, yes: the reversed logo is the white version used on dark backgrounds. Some brands also keep a reversed full colour version, where only the dark elements turn white. Whichever term you choose, use it consistently.
Generate and document the variations with Anchr Tools
Anchr Ship produces the colour versions of the three core shapes. Bind the logomark, logotype and full logo artboards and it generates black and white flat variants as new artboards, originals untouched, then exports every artboard as SVG, PNG at 2x with transparency, PDF and a print-ready CMYK PDF/X-1a. Files are named in lower case (logomark-black.svg) and sorted into a numbered folder tree by shape, medium and colour. On request it adds favicons and app icons from the logomark, and social images including a 400 x 400 profile picture. Secondary lockups, submarks, spot colour versions and small-size redraws remain yours to draw; Ship does not produce Pantone files.
Anchr Guide documents the set. It reads the logomark, logotype and full logo from the open file and fills a brand guidelines PDF; its 12-page Folio template has a logo versions page (logomark, logotype, black, white), a logo on colour page, a clear space page and a minimum size page with each version's size in mm for print and px for screen. Anchr Portal then publishes the logo files for light and dark backgrounds on a hosted page the client opens with one link.
For a quick favicon set and a 1000 px profile picture from a single file, the free logo resizer works in the browser and never uploads the logo. Both plans include all five tools: Per brand at 49 US dollars a year with a 7 day trial, Studio at 199 US dollars with a 14 day trial; see pricing.