Практика · Логотипы
Размер логотипа для шапки сайта: как выбрать без размытия
У логотипа нет одного обязательного размера для всех сайтов. Сначала измеряют место в шапке и проверяют читаемость, затем готовят файл с подходящими пропорциями и разрешением.
Короткий ответ
У логотипа нет единого правильного размера для всех сайтов. Сначала определите место в шапке и мобильной навигации, затем подготовьте файл. Размер изображения в пикселях, размер на странице и пустые поля внутри файла — три разные величины.
Повторите на своем названии
Подгоняем логотип под настоящую шапку
- 1
Измерьте доступное место
Посмотрите, сколько остается между краем контейнера и меню на компьютере, а затем между краем экрана и кнопкой меню на телефоне. Не задавайте размер по широкому монитору. Для первого теста можно взять ширину 180 CSS-пикселей, но итоговое значение зависит от вашего макета и длины названия.
- 2
Уберите лишние прозрачные поля
Если знак выглядит маленьким даже при большой ширине изображения, сравните границу файла и границу рисунка. Внутри может быть много пустоты. Используйте подготовленную горизонтальную версию или обрезку по содержимому, сохранив небольшой защитный отступ. Не обрезайте вплотную к буквам.
- 3
Сохраните пропорции
При заданной ширине высота должна рассчитываться пропорционально. Если интерфейс требует обе величины, не вводите произвольные значения: так круг превращается в овал, а буквы растягиваются. Для высокого квадратного знака разумнее подготовить отдельную горизонтальную композицию, чем сплющивать его.
- 4
Проверьте крайние состояния
Откройте страницу на узком телефоне, длинном пункте меню и при увеличенном масштабе браузера. Проверьте, не накрывает ли логотип кнопку меню и не прыгает ли высота шапки после загрузки. Для PNG оцените четкость на экране повышенной плотности; для SVG — корректность отображения.
Три размера, которые нельзя путать
| Параметр | Пример |
|---|---|
| Размер на странице | Логотип занимает 180 CSS-пикселей по ширине |
| Размер PNG | 360 пикселей по ширине для теста в плотности 2x |
| Размер рисунка внутри PNG | Если половина файла пустая, знак все равно будет маленьким |
| Пропорция | Горизонтальная версия лучше помещается в невысокую шапку |
Подготовьте мобильный вариант
Если полное название со слоганом не помещается, попробуйте горизонтальную версию без подписи. Затем компактный знак или более короткое написание. Телефон не обязан показывать все детали большой версии.
Убедитесь, что логотип не вытесняет навигацию и не перекрывает кнопку. Уменьшение букв до едва заметной строки сохраняет элементы формально, но не помогает узнавать бренд.
Типичные ошибки и как их исправить
Выбран огромный файл «для качества»
Лишние пиксели увеличивают передачу данных и не исправляют неудачную композицию. Подбирайте размер под место.
Слоган обязателен на телефоне
Если он превращается в полоску, уберите его из компактной версии и оставьте пояснение в тексте страницы.
Оценка только в редакторе
Холст не показывает соседство с меню. Финальная проверка проводится на реальном сайте.
Разбор решения
Надпись рядом с мобильным меню
Сначала уберите слоган и сравните горизонтальный вариант с компактным знаком. Не задавайте картинке 200 × 40, если исходные пропорции другие. Ограничьте размер, сохранив соотношение сторон.
Как понять, что результат готов
Сделайте снимок шапки на компьютере и телефоне при обычном масштабе. Название должно читаться, навигация оставаться доступной, высота блока — соответствовать остальному интерфейсу. Зафиксируйте выбранную ширину в настройках сайта, а не в имени файла.
- Проверено место в реальной шапке.
- Нет растягивания.
- Поля не уменьшают знак чрезмерно.
- Логотип не мешает меню на телефоне.
Частые вопросы
Есть ли универсальный размер?
Нет. Он зависит от пропорций знака, шапки и соседних элементов.
Максимально большой PNG лучше?
Не всегда: он увеличивает вес страницы. Нужен достаточный запас четкости, а не максимальное разрешение.
Проверьте решение на своем логотипе
Соберите вариант, сравните его с примером и проверьте на нужном носителе. Редактирование и комплект файлов бесплатны; для получения файлов нужен email. Телефон необязателен.
Открыть конструктор логотипов