Favicon and avatar: logo adaptation for small formats
What is lost during standard scaling
A vector file scales without loss of sharpness — that is true, but it does not help. The problem is not pixelization, but human perception on a small screen. The eye simply cannot distinguish fine details at 16-32 px, even if they are technically rendered perfectly.
When scaling down the full logo, three things are lost. First, the text: letters thinner than 2-3 px merge with each other, and serifs and crossbars become garbage. Second, letter and element spacing — what looked airy at full size merges into a dark spot at 16 px. Third, color transitions: any gradient below 48 px turns into a dirty blurred cloud, because the browser physically cannot render a smooth transition on such a small area.
Case study: how major brands arrived at a single letter
A telling example is the path taken by Facebook, Medium, Notion and Wikipedia. All of these companies have a full logo with text, but in the favicon and mobile icon only a single letter or one geometric element remains. Facebook uses not the full name, but a lowercase 'f' on a blue background. Medium uses an uppercase 'M'. Notion uses a stylized symbol without a single letter of the full nomenclature.
This is not a 'poor man's solution,' but a conscious design choice. Teams of these products tested dozens of variants and saw that any attempt to squeeze the full name into 32 px loses to a single clean symbol with high contrast. The user recognizes the brand by the shape of the letter and the color of the background faster than they can read the text — and on the favicon size, text is not to be read, it's important to recognize the silhouette within 0,2 seconds.
Adaptation system: four levels of logo
The mistake of most projects is to make one file 'for everything'. A professional approach implies a separate versioning system, each for its own size range:
- Main version — full logo with text and details, minimum application size from 24 px or 8 mm in print;
- Shortened version — without slogan and secondary elements, for medium formats such as website header or signature in an email;
- Mini version — monogram or abbreviated name, for social network avatars 48×48 px;
- Mark — one geometric element or letter, for favicon 16×16-32×32 px.
Each level is a separate, manually refined file, not an automatic reduction of the previous one. Line thickness, spacing, and contrast are recalculated for each size separately.
Step-downscaling technique
To ensure the mark does not lose clarity upon reduction, designers do not reduce it in one step, but sequentially: 512 → 256 → 128 → 64 → 32 → 16 px. At each step, lines are manually cleaned up, contrast is enhanced, and unnecessary details are removed that seemed appropriate at the previous stage. Direct scaling from 512 straight to 16 px results in jagged edges and artifacts, which step-downscaling allows to avoid.
What to remove first
The order of logo simplification is not random — there is a clear hierarchy of what is removed first and what is left the longest.
| What we remove | Why we remove it first |
|---|---|
| Text and slogan | Not readable already at 30 px, turns into noise |
| Gradients and halftones | Blur into a spot below 48 px, require 1-2 flat colors |
| Shadows, volume, effects | Create visual noise without function on a small screen |
| Small decorative details | Not visible to the eye, but 'consume' the sign's contrast |
| Secondary figures | We leave only one main element — a letter or symbol |
Color is touched last and very carefully: often instead of the full brand palette, only one accent color is left on a contrasting background for the sign.
Sizes for different platforms
Common misconception — that one file is enough, which the system will automatically adjust to the required size. In practice, each platform requires a separately optimized file, not just a resize.
| Platform | Size | Format |
|---|---|---|
| Browser (favicon) | 16×16, 32×32, 48×48 px | ICO, PNG, SVG |
| iOS (application/site icon) | 180×180 px | PNG |
| Android | 192×192 and 512×512 px | PNG |
| Windows (tile) | 144×144 px | PNG |
| Social networks (avatar) | minimum 48×48 px | PNG, JPG |
Each of these sizes is drawn or checked separately — the same monogram that is clearly readable at 180 px in iOS, when compressed to 16 px for the browser may lose contrast and requires yet another correction of line thickness.
How to check that the mark remains recognizable
Testing the logo should not be done on a designer's screen with a 400% zoom, but in real usage conditions. There is a simple checklist:
- Display the mark at actual sizes 16×16 and 32×32 px on different backgrounds — light and dark;
- Check contrast using a WCAG calculation tool — minimum 3:1, ideally 4.5:1;
- Step away from the screen 1-1,5 meters and see if the shape is recognized without straining the eyes;
- Show the mark to someone unfamiliar with the project and ask what they see — if the answer is unclear, the mark is not ready;
- Check in a real browser tab and in bookmarks — there the scale is smaller than in the mockup.
If the mark passes all five points, it can be fixed in the brandbook as the final version for mini-formats. If even one point fails — simplify further, not by adjusting color or adding a contour.
What is lost during standard scaling
A vector file scales without loss of sharpness — that is true, but it does not help. The problem is not pixelization, but human perception on a small screen. The eye simply cannot distinguish fine details at 16-32 px, even if they are technically rendered perfectly.
When scaling down the full logo, three things are lost. First, the text: letters thinner than 2-3 px merge with each other, and serifs and crossbars become garbage. Second, letter and element spacing — what looked airy at full size merges into a dark spot at 16 px. Third, color transitions: any gradient below 48 px turns into a dirty blurred cloud, because the browser physically cannot render a smooth transition on such a small area.
Case study: how major brands arrived at a single letter
A telling example is the path taken by Facebook, Medium, Notion and Wikipedia. All of these companies have a full logo with text, but in the favicon and mobile icon only a single letter or one geometric element remains. Facebook uses not the full name, but a lowercase 'f' on a blue background. Medium uses an uppercase 'M'. Notion uses a stylized symbol without a single letter of the full nomenclature.
This is not a 'poor man's solution,' but a conscious design choice. Teams of these products tested dozens of variants and saw that any attempt to squeeze the full name into 32 px loses to a single clean symbol with high contrast. The user recognizes the brand by the shape of the letter and the color of the background faster than they can read the text — and on the favicon size, text is not to be read, it's important to recognize the silhouette within 0,2 seconds.
Adaptation system: four levels of logo
The mistake of most projects is to make one file 'for everything'. A professional approach implies a separate versioning system, each for its own size range:
- Main version — full logo with text and details, minimum application size from 24 px or 8 mm in print;
- Shortened version — without slogan and secondary elements, for medium formats such as website header or signature in an email;
- Mini version — monogram or abbreviated name, for social network avatars 48×48 px;
- Mark — one geometric element or letter, for favicon 16×16-32×32 px.
Each level is a separate, manually refined file, not an automatic reduction of the previous one. Line thickness, spacing, and contrast are recalculated for each size separately.
Step-downscaling technique
To ensure the mark does not lose clarity upon reduction, designers do not reduce it in one step, but sequentially: 512 → 256 → 128 → 64 → 32 → 16 px. At each step, lines are manually cleaned up, contrast is enhanced, and unnecessary details are removed that seemed appropriate at the previous stage. Direct scaling from 512 straight to 16 px results in jagged edges and artifacts, which step-downscaling allows to avoid.
What to remove first
The order of logo simplification is not random — there is a clear hierarchy of what is removed first and what is left the longest.
| What we remove | Why we remove it first |
|---|---|
| Text and slogan | Not readable already at 30 px, turns into noise |
| Gradients and halftones | Blur into a spot below 48 px, require 1-2 flat colors |
| Shadows, volume, effects | Create visual noise without function on a small screen |
| Small decorative details | Not visible to the eye, but 'consume' the sign's contrast |
| Secondary figures | We leave only one main element — a letter or symbol |
Color is touched last and very carefully: often instead of the full brand palette, only one accent color is left on a contrasting background for the sign.
Sizes for different platforms
Common misconception — that one file is enough, which the system will automatically adjust to the required size. In practice, each platform requires a separately optimized file, not just a resize.
| Platform | Size | Format |
|---|---|---|
| Browser (favicon) | 16×16, 32×32, 48×48 px | ICO, PNG, SVG |
| iOS (application/site icon) | 180×180 px | PNG |
| Android | 192×192 and 512×512 px | PNG |
| Windows (tile) | 144×144 px | PNG |
| Social networks (avatar) | minimum 48×48 px | PNG, JPG |
Each of these sizes is drawn or checked separately — the same monogram that is clearly readable at 180 px in iOS, when compressed to 16 px for the browser may lose contrast and requires yet another correction of line thickness.
How to check that the mark remains recognizable
Testing the logo should not be done on a designer's screen with a 400% zoom, but in real usage conditions. There is a simple checklist:
- Display the mark at actual sizes 16×16 and 32×32 px on different backgrounds — light and dark;
- Check contrast using a WCAG calculation tool — minimum 3:1, ideally 4.5:1;
- Step away from the screen 1-1,5 meters and see if the shape is recognized without straining the eyes;
- Show the mark to someone unfamiliar with the project and ask what they see — if the answer is unclear, the mark is not ready;
- Check in a real browser tab and in bookmarks — there the scale is smaller than in the mockup.
If the mark passes all five points, it can be fixed in the brandbook as the final version for mini-formats. If even one point fails — simplify further, not by adjusting color or adding a contour.
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
