designing a logo that works at every size
posted 24th September 2026
Most logos are first seen on a big screen. The designer has it open at full width, the client looks at it on a laptop, and everyone agrees it looks great. Then it goes out into the world and spends most of its life somewhere much smaller: a browser tab, the corner of a social media post, the bottom of an email, a sticker on a van window seen from across the road.
A logo that only works when it is big is really a piece of illustration. A logo that still says who you are at the size of a fingernail is doing its job. Here is how we think about that when we sit down to design one.
Other small homes are just as unforgiving. A profile picture on a social network is often cropped into a circle and shown at thumbnail size in comment threads. An app icon sits in a grid of dozens of other icons, all competing for the same glance. A printed business card gives you a little more room, but the logo usually shares the card with a name, a phone number and an email address, so it rarely gets more than a couple of centimetres.
If a design survives those places, the big versions tend to look after themselves. Going the other way round - designing large and hoping it shrinks nicely - is where most of the trouble comes from.
A good test is to print the logo at the width of your thumbnail and hold it at arm's length, or simply zoom your screen out until the mark is tiny. Whatever you can still recognise is the real logo. Everything else is decoration that only appears when there is room for it.
This does not mean every logo has to be a plain circle. It means the idea behind it should be carried by a few strong shapes rather than lots of small ones.
The full logo. The mark and the name together, sometimes with a tagline. This is the one for the website header, signage, brochures and anywhere with plenty of space.
The compact logo. A tighter arrangement - for example the symbol stacked above the name instead of beside it, or the name alone without the tagline. This is for narrow spaces like a mobile header or the corner of a flyer.
The icon. The symbol or a single letter on its own, simplified if it needs to be. This is the favicon, the app icon and the social media profile picture.
The important part is that all three clearly belong together. They share the same colours, the same shapes and the same character, so someone who has seen the full logo on your shop front recognises the icon on their phone without thinking about it.
A slightly heavier weight and a little more space between letters than feels natural at large sizes usually solves most of it. Our graphic design work often involves tweaking the spacing of individual letter pairs in a logo by hand, because the default spacing of a font was designed for sentences, not for a single word that needs to be read at a glance.
Long names are harder still. If your business is called something with four words in it, the compact version and the icon will almost certainly need to lean on initials or a symbol, and it is worth deciding that early rather than discovering it when the app store asks for an icon.
So we always check that the design still works in plain black on white and in plain white on a dark background. If the logo depends on two similar shades sitting next to each other, it will fall apart in single colour. If it depends on a gradient to give it shape, it will look flat and unfinished on a T-shirt. It is much easier to design with these limits in mind than to rescue a logo later.
From that master file you can then export whatever else is needed: small PNG files for favicons and app icons, a high-resolution version for print, and single-colour versions for embroidery or engraving. When we hand over a finished logo, the client receives the whole set, so nobody ever has to take a screenshot of the website to get a copy of their own logo.
A logo has to work on the side of a van and in the corner of a phone screen. Planning for the small places first is the simplest way to make sure it does - and it is the same thinking we bring to website design, where every page has to look right on a large monitor and a small phone alike.
A logo that only works when it is big is really a piece of illustration. A logo that still says who you are at the size of a fingernail is doing its job. Here is how we think about that when we sit down to design one.
start with the smallest place it will live
Before any sketching, we ask a simple question: where is the tiniest place this mark will appear? For almost every business the answer is the favicon, the little icon next to the page title in a browser tab. The classic favicon is 16 by 16 pixels. That is 256 dots of colour to say "this is us".Other small homes are just as unforgiving. A profile picture on a social network is often cropped into a circle and shown at thumbnail size in comment threads. An app icon sits in a grid of dozens of other icons, all competing for the same glance. A printed business card gives you a little more room, but the logo usually shares the card with a name, a phone number and an email address, so it rarely gets more than a couple of centimetres.
If a design survives those places, the big versions tend to look after themselves. Going the other way round - designing large and hoping it shrinks nicely - is where most of the trouble comes from.
detail is the first thing to disappear
Fine lines, small gaps between shapes, thin outlines around lettering and delicate gradients all look lovely at full size. Shrink the logo and they start to fill in, blur together or vanish altogether. A tagline set in small type underneath the name becomes a grey smudge. A detailed drawing of a building turns into a brown rectangle.A good test is to print the logo at the width of your thumbnail and hold it at arm's length, or simply zoom your screen out until the mark is tiny. Whatever you can still recognise is the real logo. Everything else is decoration that only appears when there is room for it.
This does not mean every logo has to be a plain circle. It means the idea behind it should be carried by a few strong shapes rather than lots of small ones.
one logo, several versions
The neatest answer to the size problem is not to squeeze one design into every space, but to plan a small family of versions from the start. We usually think in three:The full logo. The mark and the name together, sometimes with a tagline. This is the one for the website header, signage, brochures and anywhere with plenty of space.
The compact logo. A tighter arrangement - for example the symbol stacked above the name instead of beside it, or the name alone without the tagline. This is for narrow spaces like a mobile header or the corner of a flyer.
The icon. The symbol or a single letter on its own, simplified if it needs to be. This is the favicon, the app icon and the social media profile picture.
The important part is that all three clearly belong together. They share the same colours, the same shapes and the same character, so someone who has seen the full logo on your shop front recognises the icon on their phone without thinking about it.
lettering needs extra care
Many small businesses want a logo that is mostly their name, and there is nothing wrong with that. It does mean the choice of typeface matters a great deal. Very light weights, tall thin letters and fonts with tight spacing all struggle at small sizes. Letters such as "r" and "n" start to merge into "m", and a lowercase "e" can close up into a blob.A slightly heavier weight and a little more space between letters than feels natural at large sizes usually solves most of it. Our graphic design work often involves tweaking the spacing of individual letter pairs in a logo by hand, because the default spacing of a font was designed for sentences, not for a single word that needs to be read at a glance.
Long names are harder still. If your business is called something with four words in it, the compact version and the icon will almost certainly need to lean on initials or a symbol, and it is worth deciding that early rather than discovering it when the app store asks for an icon.
colour is not guaranteed
A logo will not always appear in its full colours. It might be printed in one colour on a promotional pen, embroidered onto a polo shirt, stamped in black on a delivery note, or shown in white on top of a dark photograph. Some of those places support only one or two colours, and some will not show gradients at all.So we always check that the design still works in plain black on white and in plain white on a dark background. If the logo depends on two similar shades sitting next to each other, it will fall apart in single colour. If it depends on a gradient to give it shape, it will look flat and unfinished on a T-shirt. It is much easier to design with these limits in mind than to rescue a logo later.
file formats that keep it sharp
The last piece of the puzzle is technical, but it makes a big difference. A logo should be drawn as a vector - made of shapes and curves rather than pixels - so it can be scaled up to the side of a building or down to a favicon without going blurry or blocky. On the web, that usually means an SVG file for the header, which stays crisp on high-resolution phone and laptop screens.From that master file you can then export whatever else is needed: small PNG files for favicons and app icons, a high-resolution version for print, and single-colour versions for embroidery or engraving. When we hand over a finished logo, the client receives the whole set, so nobody ever has to take a screenshot of the website to get a copy of their own logo.
a quick checklist
If you are looking at a new logo, or wondering whether your current one is up to the job, try these simple checks:- Shrink it to the size of a browser tab icon. Can you still tell what it is?
- Look at it in black only, then in white only on a dark background. Does it hold together?
- Put it in a circle, as a social network would. Does anything important get cut off?
- Show the icon version to someone who knows your business. Do they recognise it without the name?
- Check that you have the original vector file, not just a JPEG from an old email.
A logo has to work on the side of a van and in the corner of a phone screen. Planning for the small places first is the simplest way to make sure it does - and it is the same thinking we bring to website design, where every page has to look right on a large monitor and a small phone alike.