Коротко. Логотип ставят в левый верхний угол шапки (для сайтов на кириллице и латинице с чтением слева направо), высотой 40-56 px на десктопе и 28-36 px на мобильном, с кликом на главную страницу. Слева и сверху от логотипа держат отступ не меньше 16-24 px, а справа — свободное охранное поле до первого пункта меню. При скролле логотип можно уменьшать до 60-70% исходной высоты, но не прятать совсем.
Почему левый верхний угол — это не просто традиция
Расположение логотипа слева в шапке — это не эстетический выбор, а результат того, как люди читают страницу: слева направо и сверху вниз (для языков с таким направлением письма, включая русский). Левый верхний угол — первая точка, куда падает взгляд на любой странице, и именно поэтому это самое «дорогое» место в шапке с точки зрения внимания пользователя.
Ставить логотип по центру или справа физически не запрещено, и некоторые нишевые сайты так делают, но это ломает ожидание: пользователь по привычке ищет клик на главную в левом верхнем углу, и если там пусто, доля пользователей на долю секунды теряется в навигации. Для рядового коммерческого сайта — интернет-магазина, сайта услуг, лендинга — отклонение от стандарта не оправдывает себя визуальной оригинальностью.
Размер логотипа в шапке: сколько пикселей на разных экранах
| Устройство | Высота логотипа | Комментарий |
|---|---|---|
| Десктоп, широкий монитор | 44-56 px | Верхняя граница — для студий и агентств, где логотип часть визуального якоря бренда |
| Десктоп, стандартная шапка | 40-48 px | Комфортный баланс с пунктами меню высотой шапки 64-80 px |
| Планшет | 32-40 px | Шапка часто уже упрощена, меню может быть скрыто в гамбургер |
| Мобильный | 28-36 px | Меньше — логотип теряет читаемость текстовой части |
| Шапка при скролле (sticky-версия) | 60-70% от исходной высоты | Уменьшение экономит вертикальное место без потери узнаваемости |
Технический расчёт файлов под эти размеры, включая запас под ретину, разобран отдельно в материале про размер логотипа для сайта.
Клик на логотип — обязательная функция, а не опция
Логотип в шапке должен вести на главную страницу — это ожидание настолько устоявшееся, что многие пользователи кликают на логотип вместо кнопки «Главная» в меню, даже если такая кнопка есть отдельно. Отсутствие ссылки на логотипе — частая находка на самодельных сайтах и в шаблонах, собранных без внимания к деталям: визуально всё на месте, а функционально логотип превращается в мёртвую картинку.
Проверить это можно за 10 секунд: кликнуть на логотип на своём сайте. Если ничего не произошло — это не мелочь, а потерянная точка навигации на каждой странице сайта.
Отступы и охранное поле в шапке
Логотип нуждается в свободном пространстве вокруг себя — это называется охранным полем и защищает знак от «слипания» с соседними элементами интерфейса:
- слева и сверху — отступ от края шапки не меньше 16-24 px, иначе логотип визуально обрезается краем экрана на маленьких мониторах;
- справа — расстояние до первого пункта меню или до кнопки-действия должно быть заметно больше, чем расстояние между самими пунктами меню, иначе логотип воспринимается как часть меню, а не отдельный элемент бренда;
- по вертикали — логотип должен визуально центрироваться относительно всей высоты шапки, а не «прилипать» к верхнему или нижнему краю.
Частая ошибка вёрстки — задать логотипу фиксированную высоту, но не ограничить его контейнер, из-за чего при изменении текста в шапке (например, добавлении номера телефона) логотип сдвигается или обрезается. Правильно — верстать логотип во флекс- или грид-контейнере с чётко заданными границами, а не «на глаз».
Логотип в шапке на мобильном экране
На мобильном пространство шапки ограничено сильнее всего, и здесь логотип конкурирует за место с кнопкой-гамбургером меню, иконкой поиска и иногда кнопкой звонка или корзины. Рабочая практика:
- уменьшить логотип до 28-36 px по высоте, сохранив пропорции — не сжимать по одной оси;
- если логотип состоит из знака и текста, на узких экранах (до 375-400 px) часто оставляют только знак без текстовой части — это требует отдельной компактной версии файла, а не программного обрезания;
- не убирать клик на главную — на мобильном это работает даже важнее, потому что путь назад через меню длиннее.
Если у логотипа нет компактной версии для узких экранов, а его текстовая часть при сжатии превращается в нечитаемую полоску — это сигнал заказать у дизайнера альтернативную версию знака именно под мобильную шапку, а не пытаться решить проблему только вёрсткой.
Sticky-шапка: что происходит с логотипом при скролле
Прилипающая (sticky) шапка, которая остаётся видимой при скролле страницы, — стандарт для большинства современных сайтов, потому что она сохраняет доступ к навигации и логотипу в любой точке страницы. При этом полноразмерная шапка на весь скролл занимает слишком много вертикального пространства, особенно на мобильном, поэтому логотип и всю шапку принято уменьшать при скролле вниз — обычно до 60-70% от исходной высоты.
Ошибка, которая встречается на части сайтов, — полностью скрывать логотип при скролле, оставляя только меню. Это экономит место, но лишает пользователя постоянного визуального напоминания о бренде и точки клика на главную — лучше уменьшить логотип, чем убрать его совсем.
Частые вопросы
Можно ли разместить логотип по центру шапки вместо левого угла?
Технически можно, и для некоторых нишевых сайтов (например, лендинг одного продукта без сложной навигации) это работает. Для сайта с многоуровневым меню и стандартным набором коммерческих задач центральное расположение усложняет вёрстку меню и не даёт заметного преимущества — левый угол остаётся более предсказуемым выбором для пользователя.
Логотип в шапке обязательно должен вести на главную страницу?
Да, это устоявшееся пользовательское ожидание. Отсутствие такой ссылки — частая находка при аудите самодельных сайтов, где логотип визуально на месте, но не кликабелен.
Сколько по времени занимает исправить размер и отступы логотипа в готовой вёрстке?
Если проблема только в CSS (размер, отступы, наличие ссылки) — 1-2 часа работы верстальщика. Если нужна отдельная компактная версия логотипа для мобильной шапки — добавляется время на подготовку файла у дизайнера, обычно 1-3 часа.
Нужно ли уменьшать логотип при скролле на всех сайтах?
Не обязательно — это оправдано, когда шапка занимает большую часть экрана на мобильном или когда сайт длинный и пользователь много скроллит. Для короткого лендинга в одну-две страницы эффект от уменьшения логотипа при скролле почти не заметен.
Что делать, если логотип на мобильном обрезается или съезжает при повороте экрана?
Это почти всегда следствие вёрстки без чёткого ограничения контейнера логотипа — размер задан в пикселях без привязки к ширине экрана или без флекс-контейнера. Решается на уровне CSS, без переделки самого файла логотипа.
Проверить, как логотип и шапка ведут себя на разных экранах
Посмотрим вёрстку шапки на мобильном и десктопе, отступы, клик на логотип и поведение при скролле.