# Логотип для сайта: требования и форматы

Обновлено 29 октября 2026 г. · 3 мин чтения · Студия AETHER · https://aether-studio.ru/blog/logotip-dlya-sajta

На сайте логотип живёт в десятке мест: в шапке на компьютере и на телефоне, во вкладке браузера, в превью ссылки в мессенджере, в подвале. Один файл из презентации для всего этого не подойдёт. Разбираем, какие версии и форматы логотипа нужны сайту и о чём часто забывают.

## Какие версии нужны

- **Полная** — знак и название вместе. Для шапки на компьютере и подвала.
- **Компактная** — только знак или сокращение. Для шапки на телефоне, иконки во вкладке браузера и аватаров в соцсетях.
- **Для тёмного и светлого фона.** Если у сайта есть тёмные и светлые блоки, нужны обе версии — а не логотип в белой плашке поверх тёмного фона.
- **Одноцветная** — для мест, где цвет мешает: водяные знаки, печать, наложение на фото.

## Форматы

| Формат | Где нужен |
| --- | --- |
| SVG | Основной формат для сайта: вектор, чёткий на любом экране и при любом размере |
| PNG с прозрачным фоном | Запасной вариант и для сервисов, которые не принимают SVG |
| Иконка вкладки (favicon) | Маленький квадратный знак: SVG и PNG 32×32 и 180×180 для закладок на телефоне |
| Картинка для превью ссылки | Логотип на карточке 1200×630, которую показывают мессенджеры |

Если у вас есть только JPEG из презентации или фото вывески — попросите у дизайнера исходник в векторе: из JPEG хороший логотип для сайта не получится.

## Размер в шапке

Логотип в шапке обычно занимает 32–48 пикселей по высоте на компьютере и меньше на телефоне. Проверьте две вещи:

- **читается ли название** в таком размере — тонкие буквы и мелкая подпись внизу логотипа превращаются в полоску;
- **не съедает ли логотип место** — на телефоне шапка должна оставлять экран для содержимого.

Если полный логотип в маленьком размере не читается, на телефоне используйте компактную версию.

## Логотип — ссылка на главную

Привычка пользователей: нажать на логотип, чтобы вернуться на главную. Поэтому логотип в шапке делают ссылкой. И у этой ссылки должно быть текстовое название — например, «Название компании — на главную». Если логотип — просто картинка без подписи, для поисковиков и экранных дикторов это пустая ссылка.

Мы сами на этом попались: на нашем сайте логотип в шапке был SVG-картинкой, и SEO-аудит отметил его как «ссылку без текста». Исправили, добавив скрытое текстовое название, — теперь ссылка понятна и людям с экранным диктором, и поисковикам.

## Как устроено у нас

Наш знак — стилизованная буква A: в логотипе AETHER она нарисована треугольником. Знак отдельно работает как иконка вкладки, на карточках превью ссылок и как самостоятельный элемент на сайте, а слово целиком — в шапке и большим во всю ширину в подвале. Один и тот же знак в разных размерах делает бренд узнаваемым, даже когда видна только его часть.

## Если логотипа нет

- **Начните со слова.** Название, набранное хорошим шрифтом, — честный логотип для старта. Многие известные бренды так и выглядят.
- **Генераторы логотипов** дают быстрый результат, но похожий на тысячи других, а зарегистрировать такой знак как товарный знак бывает сложно.
- **Заказать у дизайнера** имеет смысл, когда бизнес уже понятен: логотип, нарисованный под бренд, служит годами.

Логотип и фирменный стиль — отдельная работа, которая обычно предшествует сайту. Что входит в дизайн сайта и сколько он стоит, разобрано в статье [«Сколько стоит дизайн сайта»](https://aether-studio.ru/blog/skolko-stoit-dizajn-sajta).

## Если нужен сайт

Логотип, цвета и шрифты — основа дизайна сайта. Сайт компании мы рисуем в собственном дизайне: главную и шаблоны внутренних страниц показываем в макетах и правим до начала вёрстки.

**Услуга «Корпоративный сайт»:** от 7 рабочих дней, от 45 000 ₽, обычно 45 000–130 000 ₽. Подробнее: https://aether-studio.ru/services/corporate

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.