Масштабируемость логотипа: от фавикона до билборда
С чем сталкивается дизайнер, когда логотип «не масштабируется»
Обычно это выглядит так: клиент присылает логотип в 512px, всё выглядит чётко, но на фавиконе вкладки браузера остаётся серое или тёмное пятно без единой узнаваемой формы. Причина в том, что при уменьшении браузер или графический движок не «понимает», какие элементы важны, а какие — декоративные. Он просто пропорционально сжимает всё подряд: тонкие линии, тени, градиенты, второстепенные детали внутри знака. В результате мелкие штрихи толщиной в 1-2 пикселя на большом размере превращаются в субпиксельную кашу на маленьком — их либо не видно вовсе, либо они сливаются в серое марево. Тени и блюр при таком сжатии превращаются в грязь, а не в объём.
Здесь и кроется главная ошибка большинства брендбуков: они описывают минимальные размеры (3-5 мм для печати, 15-30px для цифры, 16/32/48px для фавиконов — это стандарт Google и MDN), но не объясняют, что для соответствия этим цифрам логотип должен быть перепроектирован, а не просто ужат в Photoshop.
Почему нельзя просто сжать 512px до 16px
При переходе с 512 на 16 пикселей теряется не картинка, а информация о приоритете элементов. Дизайнер, работающий с крупным форматом, закладывает в композицию иерархию: главный знак, вспомогательные элементы, текстовый блок, воздух между ними. При автоматическом уменьшении эта иерархия схлопывается — всё сжимается с одинаковым коэффициентом, и то, что было акцентом, становится равным по значимости с деталью на периферии. Программа не умеет решать, что оставить, а что выбросить.
Именно поэтому в Evoke Studio придерживаются правила: начинать дизайн логотипа с фавикона 16×16, а не с полноразмерной версии 512px. Это переворачивает привычный процесс, но результат честнее. Когда вы вынуждены уложить идею бренда в 256 пикселей, вы автоматически отсекаете украшательство и оставляете суть — форму, которая читается силуэтом, без опоры на детали.
Как на самом деле работают GitHub, Figma и Notion
Посмотрите на фавиконы крупных продуктовых компаний — там нет уменьшенной копии полного логотипа. GitHub в иконке использует силуэт кота (Octocat) без текста «GitHub». Figma и Notion в маленьком размере показывают одну букву или монограмму, а не сжатый леттеринг с логотипом целиком. Это не техническое ограничение — это осознанное проектное решение: для маленького размера создаётся отдельный знак, который дизайнеры разрабатывают параллельно с основным логотипом, а не выводят из него автоматическим уменьшением.
Отсюда вывод, который редко проговаривают в статьях про масштабируемость: система логотипа — это не один файл в разных размерах, а несколько разных дизайнов, объединённых общей стилистикой, цветом и характером.
Из чего состоит система: mark, icon, full lockup
Полноценная система обычно строится на трёх уровнях сложности, а не на трёх размерах одного файла.
| Версия | Что содержит | Где используется |
|---|---|---|
| Full lockup | Знак + название компании, возможен слоган | Сайт (header), билборды, документы, презентации от 200px и печать от 15-30 мм |
| Icon / mark | Только графический знак без текста | Иконки приложений, аватары соцсетей, средние размеры 32-200px |
| Favicon / monogram | Упрощённая форма знака или одна буква | Фавикон 16-48px, Apple touch icon, метки в интерфейсе |
Каждая версия — это отдельная работа дизайнера над формой, а не результат сжатия. Полный лок-ап нельзя просто обрезать до иконки: пропорции штрихов, толщина линий и расстояния между элементами пересчитываются заново под конкретный диапазон размеров.
Что убирать при переходе от большого размера к маленькому
Когда логотип уменьшается, дизайнер целенаправленно жертвует деталями в такой последовательности:
- Тонкие штрихи (hairline) — на 16×16 линия должна быть не тоньше 2-3 пикселей, иначе она пропадёт при рендере
- Градиенты и тени — на малых размерах превращаются в грязные пятна, заменяются на плоский цвет
- Второстепенные графические элементы — орнаменты, засечки, декоративные линии внутри знака
- Текст и слоган — убираются полностью, остаётся только графический знак или монограмма
- Количество цветов — многоцветный логотип на фавиконе упрощается до одного-двух цветов с хорошим контрастом
Ориентировочная сетка размеров под разные платформы: favicon 16/32/48px, Apple touch icon 180px, PWA icon 192/512px, иконки для соцсетей (Twitter, LinkedIn, YouTube) 300-800px, печать — от 5 до 30 мм в зависимости от носителя. Для каждого диапазона нужна своя степень упрощения, а не один универсальный файл.
Как протестировать логотип до печати и запуска
Тестирование на реальных размерах — это то, что пропускают почти все статьи, ограничиваясь советом «экспортируйте в SVG». На практике нужен конкретный протокол.
- Экспортируйте знак в PNG на реальных пиксельных размерах 16, 32, 48px — не масштабируйте векторный файл на глаз в редакторе, смотрите растровый результат таким, каким его увидит пользователь в вкладке браузера.
- Проверьте контраст между знаком и фоном по стандарту WCAG — минимум 3:1, комфортно 4.5:1. Если логотип одноцветный на прозрачном фоне, на тёмной теме браузера он часто просто исчезает — решение: подложить цветной фон вместо прозрачности.
- Проверьте pixel snapping — выравнивание форм по пиксельной сетке. Если элементы попадают «между» пикселями, рендер даёт размытые полупрозрачные края вместо чёткой линии; для фавиконов это критично.
- Прогоните логотип через симулятор дальтонизма (есть бесплатные плагины для Figma и Photoshop). Около 8% мужчин имеют разные формы цветовой слепоты, и если знак различим только по цвету без разницы в форме или яркости, часть аудитории его просто не распознает.
- Распечатайте на минимальном заявленном размере — 3-5 мм, как в брендбуках ИТМО и БЕЛАЗ — и посмотрите, не слипаются ли штрихи физически на бумаге, а не на экране.
- Проверьте на реальном билборде или крупноформатном макете — на больших размерах часто вылезает обратная проблема: воздух внутри знака выглядит пустым, пропорции штрихов кажутся слишком тонкими для дистанции просмотра.
Технический слой: SVG и что реально нового в 2025
SVG остаётся правильным форматом для основной части системы благодаря векторной природе — файл не пикселизируется при масштабировании. Но чистый SVG без дополнительной логики всё равно сжимает всё пропорционально, поэтому для фавиконов и мелких иконок исторически экспортировали отдельные PNG. С поддержкой CSS container queries в 2025 году появилась возможность внутри одного SVG-файла переключать видимость элементов в зависимости от размера контейнера — это позволяет держать несколько версий логотипа (полную, среднюю, минимальную) в одном файле и показывать нужную автоматически, без ручного экспорта десятков PNG под каждую платформу. Это не отменяет необходимость спроектировать каждую версию отдельно — но упрощает техническую поддержку системы после того, как дизайн готов.
Здесь и кроется главная ошибка большинства брендбуков: они описывают минимальные размеры (3-5 мм для печати, 15-30px для цифры, 16/32/48px для фавиконов — это стандарт Google и MDN), но не объясняют, что для соответствия этим цифрам логотип должен быть перепроектирован, а не просто ужат в Photoshop.
Почему нельзя просто сжать 512px до 16px
При переходе с 512 на 16 пикселей теряется не картинка, а информация о приоритете элементов. Дизайнер, работающий с крупным форматом, закладывает в композицию иерархию: главный знак, вспомогательные элементы, текстовый блок, воздух между ними. При автоматическом уменьшении эта иерархия схлопывается — всё сжимается с одинаковым коэффициентом, и то, что было акцентом, становится равным по значимости с деталью на периферии. Программа не умеет решать, что оставить, а что выбросить.
Именно поэтому в Evoke Studio придерживаются правила: начинать дизайн логотипа с фавикона 16×16, а не с полноразмерной версии 512px. Это переворачивает привычный процесс, но результат честнее. Когда вы вынуждены уложить идею бренда в 256 пикселей, вы автоматически отсекаете украшательство и оставляете суть — форму, которая читается силуэтом, без опоры на детали.
Как на самом деле работают GitHub, Figma и Notion
Посмотрите на фавиконы крупных продуктовых компаний — там нет уменьшенной копии полного логотипа. GitHub в иконке использует силуэт кота (Octocat) без текста «GitHub». Figma и Notion в маленьком размере показывают одну букву или монограмму, а не сжатый леттеринг с логотипом целиком. Это не техническое ограничение — это осознанное проектное решение: для маленького размера создаётся отдельный знак, который дизайнеры разрабатывают параллельно с основным логотипом, а не выводят из него автоматическим уменьшением.
Отсюда вывод, который редко проговаривают в статьях про масштабируемость: система логотипа — это не один файл в разных размерах, а несколько разных дизайнов, объединённых общей стилистикой, цветом и характером.
Из чего состоит система: mark, icon, full lockup
Полноценная система обычно строится на трёх уровнях сложности, а не на трёх размерах одного файла.
| Версия | Что содержит | Где используется |
|---|---|---|
| Full lockup | Знак + название компании, возможен слоган | Сайт (header), билборды, документы, презентации от 200px и печать от 15-30 мм |
| Icon / mark | Только графический знак без текста | Иконки приложений, аватары соцсетей, средние размеры 32-200px |
| Favicon / monogram | Упрощённая форма знака или одна буква | Фавикон 16-48px, Apple touch icon, метки в интерфейсе |
Каждая версия — это отдельная работа дизайнера над формой, а не результат сжатия. Полный лок-ап нельзя просто обрезать до иконки: пропорции штрихов, толщина линий и расстояния между элементами пересчитываются заново под конкретный диапазон размеров.
Что убирать при переходе от большого размера к маленькому
Когда логотип уменьшается, дизайнер целенаправленно жертвует деталями в такой последовательности:
- Тонкие штрихи (hairline) — на 16×16 линия должна быть не тоньше 2-3 пикселей, иначе она пропадёт при рендере
- Градиенты и тени — на малых размерах превращаются в грязные пятна, заменяются на плоский цвет
- Второстепенные графические элементы — орнаменты, засечки, декоративные линии внутри знака
- Текст и слоган — убираются полностью, остаётся только графический знак или монограмма
- Количество цветов — многоцветный логотип на фавиконе упрощается до одного-двух цветов с хорошим контрастом
Ориентировочная сетка размеров под разные платформы: favicon 16/32/48px, Apple touch icon 180px, PWA icon 192/512px, иконки для соцсетей (Twitter, LinkedIn, YouTube) 300-800px, печать — от 5 до 30 мм в зависимости от носителя. Для каждого диапазона нужна своя степень упрощения, а не один универсальный файл.
Как протестировать логотип до печати и запуска
Тестирование на реальных размерах — это то, что пропускают почти все статьи, ограничиваясь советом «экспортируйте в SVG». На практике нужен конкретный протокол.
- Экспортируйте знак в PNG на реальных пиксельных размерах 16, 32, 48px — не масштабируйте векторный файл на глаз в редакторе, смотрите растровый результат таким, каким его увидит пользователь в вкладке браузера.
- Проверьте контраст между знаком и фоном по стандарту WCAG — минимум 3:1, комфортно 4.5:1. Если логотип одноцветный на прозрачном фоне, на тёмной теме браузера он часто просто исчезает — решение: подложить цветной фон вместо прозрачности.
- Проверьте pixel snapping — выравнивание форм по пиксельной сетке. Если элементы попадают «между» пикселями, рендер даёт размытые полупрозрачные края вместо чёткой линии; для фавиконов это критично.
- Прогоните логотип через симулятор дальтонизма (есть бесплатные плагины для Figma и Photoshop). Около 8% мужчин имеют разные формы цветовой слепоты, и если знак различим только по цвету без разницы в форме или яркости, часть аудитории его просто не распознает.
- Распечатайте на минимальном заявленном размере — 3-5 мм, как в брендбуках ИТМО и БЕЛАЗ — и посмотрите, не слипаются ли штрихи физически на бумаге, а не на экране.
- Проверьте на реальном билборде или крупноформатном макете — на больших размерах часто вылезает обратная проблема: воздух внутри знака выглядит пустым, пропорции штрихов кажутся слишком тонкими для дистанции просмотра.
Технический слой: SVG и что реально нового в 2025
SVG остаётся правильным форматом для основной части системы благодаря векторной природе — файл не пикселизируется при масштабировании. Но чистый SVG без дополнительной логики всё равно сжимает всё пропорционально, поэтому для фавиконов и мелких иконок исторически экспортировали отдельные PNG. С поддержкой CSS container queries в 2025 году появилась возможность внутри одного SVG-файла переключать видимость элементов в зависимости от размера контейнера — это позволяет держать несколько версий логотипа (полную, среднюю, минимальную) в одном файле и показывать нужную автоматически, без ручного экспорта десятков PNG под каждую платформу. Это не отменяет необходимость спроектировать каждую версию отдельно — но упрощает техническую поддержку системы после того, как дизайн готов.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
