Статья
Логотип для сайта: требования и форматы
На сайте логотип живёт в десятке мест: в шапке на компьютере и на телефоне, во вкладке браузера, в превью ссылки в мессенджере, в подвале. Один файл из презентации для всего этого не подойдёт. Разбираем, какие версии и форматы логотипа нужны сайту и о чём часто забывают.
Какие версии нужны
- Полная — знак и название вместе. Для шапки на компьютере и подвала.
- Компактная — только знак или сокращение. Для шапки на телефоне, иконки во вкладке браузера и аватаров в соцсетях.
- Для тёмного и светлого фона. Если у сайта есть тёмные и светлые блоки, нужны обе версии — а не логотип в белой плашке поверх тёмного фона.
- Одноцветная — для мест, где цвет мешает: водяные знаки, печать, наложение на фото.
Форматы
| Формат | Где нужен |
|---|---|
| SVG | Основной формат для сайта: вектор, чёткий на любом экране и при любом размере |
| PNG с прозрачным фоном | Запасной вариант и для сервисов, которые не принимают SVG |
| Иконка вкладки (favicon) | Маленький квадратный знак: SVG и PNG 32×32 и 180×180 для закладок на телефоне |
| Картинка для превью ссылки | Логотип на карточке 1200×630, которую показывают мессенджеры |
Если у вас есть только JPEG из презентации или фото вывески — попросите у дизайнера исходник в векторе: из JPEG хороший логотип для сайта не получится.
Размер в шапке
Логотип в шапке обычно занимает 32–48 пикселей по высоте на компьютере и меньше на телефоне. Проверьте две вещи:
- читается ли название в таком размере — тонкие буквы и мелкая подпись внизу логотипа превращаются в полоску;
- не съедает ли логотип место — на телефоне шапка должна оставлять экран для содержимого.
Если полный логотип в маленьком размере не читается, на телефоне используйте компактную версию.
Логотип — ссылка на главную
Привычка пользователей: нажать на логотип, чтобы вернуться на главную. Поэтому логотип в шапке делают ссылкой. И у этой ссылки должно быть текстовое название — например, «Название компании — на главную». Если логотип — просто картинка без подписи, для поисковиков и экранных дикторов это пустая ссылка.
Мы сами на этом попались: на нашем сайте логотип в шапке был SVG-картинкой, и SEO-аудит отметил его как «ссылку без текста». Исправили, добавив скрытое текстовое название, — теперь ссылка понятна и людям с экранным диктором, и поисковикам.
Как устроено у нас
Наш знак — стилизованная буква A: в логотипе AETHER она нарисована треугольником. Знак отдельно работает как иконка вкладки, на карточках превью ссылок и как самостоятельный элемент на сайте, а слово целиком — в шапке и большим во всю ширину в подвале. Один и тот же знак в разных размерах делает бренд узнаваемым, даже когда видна только его часть.
Если логотипа нет
- Начните со слова. Название, набранное хорошим шрифтом, — честный логотип для старта. Многие известные бренды так и выглядят.
- Генераторы логотипов дают быстрый результат, но похожий на тысячи других, а зарегистрировать такой знак как товарный знак бывает сложно.
- Заказать у дизайнера имеет смысл, когда бизнес уже понятен: логотип, нарисованный под бренд, служит годами.
Логотип и фирменный стиль — отдельная работа, которая обычно предшествует сайту. Что входит в дизайн сайта и сколько он стоит, разобрано в статье «Сколько стоит дизайн сайта».
Если нужен сайт
Логотип, цвета и шрифты — основа дизайна сайта. Сайт компании мы рисуем в собственном дизайне: главную и шаблоны внутренних страниц показываем в макетах и правим до начала вёрстки.