Logo scalability: from favicon to billboard
What designers encounter when a logo 'doesn't scale'
Usually, it looks like this: a client sends a logo in 512px, everything looks sharp, but on a browser tab favicon, a gray or dark spot remains without a single recognizable shape. The reason is that when shrinking, the browser or graphics engine does not 'understand' which elements are important and which are decorative. It simply proportionally compresses everything in turn: thin lines, shadows, gradients, secondary details inside the sign. As a result, tiny strokes 1-2 pixels wide on a large size turn into subpixel chaos on a small one — they are either not visible at all or merge into a gray haze. Shadows and blur, when compressed this way, turn into dirt, not volume.
Here lies the main mistake of most brandbooks: they describe the minimum sizes (3-5 mm for printing, 15-30px for digital display, 16/32/48px for favicons — this is the Google and MDN standard), but do not explain that to meet these figures, the logo must be re-designed, not simply squeezed in Photoshop.
Why can't we just compress 512px down to 16px
When transitioning from 512 to 16 pixels, what is lost is not the image, but the information about the priority of elements. A designer working with a large format builds a hierarchy into the composition: the main mark, auxiliary elements, text block, and the air between them. With automatic reduction, this hierarchy collapses — everything is compressed with the same coefficient, and what was an accent becomes equal in significance to a detail on the periphery. The program does not know how to decide what to keep and what to discard.
That is why in Evoke Studio we follow the rule: to start logo design with a favicon 16×16, not with a full-size version 512px. This flips the usual process, but the result is fairer. When you are forced to fit a brand idea into 256 pixels, you automatically filter out ornamentation and leave the essence — the shape that reads as a silhouette, without relying on details.
How GitHub, Figma and Notion actually work
Look at the favicons of major product companies — there is no reduced copy of the full logo there. GitHub uses the silhouette of a cat (Octocat) without the text 'GitHub' in its icon. Figma and Notion show just one letter or a monogram in small size, not a compressed lettering with the full logo. This is not a technical limitation — it is a conscious design decision: for small sizes, a separate sign is created, which designers develop in parallel with the main logo, not derived from it by automatic reduction.
The conclusion that is rarely stated in articles about scalability: a logo system is not one file in different sizes, but several different designs united by a common style, color and character.
What the system consists of: mark, icon, full lockup
A full system is usually built on three levels of complexity, not on three sizes of one file.
| Version | What it includes | Where used |
|---|---|---|
| Full lockup | Mark + company name, with a possible slogan | Website (header), billboards, documents, presentations from 200px and printing from 15-30 mm |
| Icon / mark | Only the graphic mark without text | App icons, social media avatars, medium sizes 32-200px |
| Favicon / monogram | A simplified form of the mark or a single letter | Favicon 16-48px, Apple touch icon, interface labels |
Each version is a designer's individual work on form, not a result of compression. A full local-appeal cannot simply be cropped down to an icon: the proportions of strokes, line thickness, and distances between elements must be recalculated anew for a specific size range.
What to remove when transitioning from a large size to a small one
When a logo is reduced in size, a designer deliberately sacrifices details in the following sequence:
- Thin strokes (hairline) — on 16×16 the line should not be thinner than 2-3 pixels, otherwise it will disappear during rendering
- Gradients and shadows — on small sizes they become muddy spots and are replaced with flat colors
- Secondary graphic elements — ornaments, ticks, decorative lines within the sign
- Text and slogan — are removed completely, only the graphic sign or monogram remains
- Number of colors — a multicolor logo on a favicon is simplified to one or two colors with good contrast
Approximate grid of sizes for different platforms: favicon 16/32/48px, Apple touch icon 180px, PWA icon 192/512px, icons for social networks (Twitter, LinkedIn, YouTube) 300-800px, print — from 5 to 30 mm depending on the medium. Each range requires its own degree of simplification, not one universal file.
How to test a logo before printing and launch
Testing at actual sizes — this is what almost all articles skip, limiting themselves to the advice 'export to SVG'. In practice, a specific protocol is needed.
- Export the sign in PNG at actual pixel sizes 16, 32, 48px — do not scale the vector file by eye in the editor, look at the raster result as the user will see it in the browser tab.
- Check contrast between the sign and the background according to the WCAG standard — minimum 3:1, comfortably 4.5:1. If the logo is single-color on a transparent background, on a dark browser theme it often simply disappears — solution: use a colored background instead of transparency.
- Check pixel snapping — alignment of shapes to the pixel grid. If elements fall 'between' pixels, rendering gives blurred semi-transparent edges instead of a sharp line; for favicons this is critical.
- Run the logo through a color blindness simulator (there are free plugins for Figma and Photoshop). Approximately 8% of men have various forms of color blindness, and if the sign is distinguishable only by color without differences in shape or brightness, part of the audience simply won't recognize it.
- Print at the minimum specified size—3-5 mm, as in the brandbooks of ITMO and BELAZ—and check whether the strokes physically blur together on paper, not just on the screen.
- Test on a real billboard or large-format mockup—large sizes often cause the opposite problem: the air inside the sign looks empty, and the proportions of the strokes appear too thin for viewing distance.
Technical layer: SVG and what is truly new in 2025
SVG remains the correct format for the core of the system due to its vector nature — the file does not pixelate when scaled. But a plain SVG without additional logic still compresses everything proportionally, so for favicons and small icons, PNG files were historically exported separately. With support for CSS container queries in 2025 year, it became possible to switch the visibility of elements within a single SVG file depending on the container size — this allows keeping several versions of the logo (full, medium, minimal) in one file and showing the appropriate one automatically, without manually exporting dozens of PNG files for each platform. This does not negate the need to design each version separately — but it simplifies the technical maintenance of the system once the design is complete.
Here lies the main mistake of most brandbooks: they describe the minimum sizes (3-5 mm for printing, 15-30px for digital display, 16/32/48px for favicons — this is the Google and MDN standard), but do not explain that to meet these figures, the logo must be re-designed, not simply squeezed in Photoshop.
Why can't we just compress 512px down to 16px
When transitioning from 512 to 16 pixels, what is lost is not the image, but the information about the priority of elements. A designer working with a large format builds a hierarchy into the composition: the main mark, auxiliary elements, text block, and the air between them. With automatic reduction, this hierarchy collapses — everything is compressed with the same coefficient, and what was an accent becomes equal in significance to a detail on the periphery. The program does not know how to decide what to keep and what to discard.
That is why in Evoke Studio we follow the rule: to start logo design with a favicon 16×16, not with a full-size version 512px. This flips the usual process, but the result is fairer. When you are forced to fit a brand idea into 256 pixels, you automatically filter out ornamentation and leave the essence — the shape that reads as a silhouette, without relying on details.
How GitHub, Figma and Notion actually work
Look at the favicons of major product companies — there is no reduced copy of the full logo there. GitHub uses the silhouette of a cat (Octocat) without the text 'GitHub' in its icon. Figma and Notion show just one letter or a monogram in small size, not a compressed lettering with the full logo. This is not a technical limitation — it is a conscious design decision: for small sizes, a separate sign is created, which designers develop in parallel with the main logo, not derived from it by automatic reduction.
The conclusion that is rarely stated in articles about scalability: a logo system is not one file in different sizes, but several different designs united by a common style, color and character.
What the system consists of: mark, icon, full lockup
A full system is usually built on three levels of complexity, not on three sizes of one file.
| Version | What it includes | Where used |
|---|---|---|
| Full lockup | Mark + company name, with a possible slogan | Website (header), billboards, documents, presentations from 200px and printing from 15-30 mm |
| Icon / mark | Only the graphic mark without text | App icons, social media avatars, medium sizes 32-200px |
| Favicon / monogram | A simplified form of the mark or a single letter | Favicon 16-48px, Apple touch icon, interface labels |
Each version is a designer's individual work on form, not a result of compression. A full local-appeal cannot simply be cropped down to an icon: the proportions of strokes, line thickness, and distances between elements must be recalculated anew for a specific size range.
What to remove when transitioning from a large size to a small one
When a logo is reduced in size, a designer deliberately sacrifices details in the following sequence:
- Thin strokes (hairline) — on 16×16 the line should not be thinner than 2-3 pixels, otherwise it will disappear during rendering
- Gradients and shadows — on small sizes they become muddy spots and are replaced with flat colors
- Secondary graphic elements — ornaments, ticks, decorative lines within the sign
- Text and slogan — are removed completely, only the graphic sign or monogram remains
- Number of colors — a multicolor logo on a favicon is simplified to one or two colors with good contrast
Approximate grid of sizes for different platforms: favicon 16/32/48px, Apple touch icon 180px, PWA icon 192/512px, icons for social networks (Twitter, LinkedIn, YouTube) 300-800px, print — from 5 to 30 mm depending on the medium. Each range requires its own degree of simplification, not one universal file.
How to test a logo before printing and launch
Testing at actual sizes — this is what almost all articles skip, limiting themselves to the advice 'export to SVG'. In practice, a specific protocol is needed.
- Export the sign in PNG at actual pixel sizes 16, 32, 48px — do not scale the vector file by eye in the editor, look at the raster result as the user will see it in the browser tab.
- Check contrast between the sign and the background according to the WCAG standard — minimum 3:1, comfortably 4.5:1. If the logo is single-color on a transparent background, on a dark browser theme it often simply disappears — solution: use a colored background instead of transparency.
- Check pixel snapping — alignment of shapes to the pixel grid. If elements fall 'between' pixels, rendering gives blurred semi-transparent edges instead of a sharp line; for favicons this is critical.
- Run the logo through a color blindness simulator (there are free plugins for Figma and Photoshop). Approximately 8% of men have various forms of color blindness, and if the sign is distinguishable only by color without differences in shape or brightness, part of the audience simply won't recognize it.
- Print at the minimum specified size—3-5 mm, as in the brandbooks of ITMO and BELAZ—and check whether the strokes physically blur together on paper, not just on the screen.
- Test on a real billboard or large-format mockup—large sizes often cause the opposite problem: the air inside the sign looks empty, and the proportions of the strokes appear too thin for viewing distance.
Technical layer: SVG and what is truly new in 2025
SVG remains the correct format for the core of the system due to its vector nature — the file does not pixelate when scaled. But a plain SVG without additional logic still compresses everything proportionally, so for favicons and small icons, PNG files were historically exported separately. With support for CSS container queries in 2025 year, it became possible to switch the visibility of elements within a single SVG file depending on the container size — this allows keeping several versions of the logo (full, medium, minimal) in one file and showing the appropriate one automatically, without manually exporting dozens of PNG files for each platform. This does not negate the need to design each version separately — but it simplifies the technical maintenance of the system once the design is complete.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
