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

Зачем сайту логотип

Логотип — первый визуальный элемент, который видит посетитель. Он располагается в шапке сайта и мгновенно идентифицирует бренд. Хороший логотип запоминается, вызывает доверие и работает на любом носителе: от favicon (16×16 px) до билборда.

Логотип — ключевой элемент фирменного стиля. Всё остальное — цвета, шрифты, иконки — строится вокруг него.

Типы логотипов

Текстовый (wordmark)

Название компании, оформленное уникальным шрифтом. Примеры: Google, Coca-Cola, Samsung. Подходит для компаний с коротким запоминающимся названием. Плюс — не нужен отдельный символ, название = логотип.

Символьный (icon/symbol)

Графический знак без текста. Примеры: Apple, Nike, Twitter. Работает только для узнаваемых брендов. Для нового бизнеса символ без названия не запомнится.

Комбинированный

Символ + текст. Самый универсальный тип. Можно использовать вместе и по отдельности. Примеры: Сбер, МТС, Яндекс. Рекомендуется для большинства бизнесов.

Эмблема

Текст внутри формы (щит, круг, герб). Примеры: Starbucks, BMW, Harley-Davidson. Выглядит солидно, но плохо масштабируется на мелких размерах.

Технические требования для веба

Форматы файлов

• SVG — основной формат для сайта. Векторный, масштабируется без потери качества, лёгкий (обычно 2–10 КБ). Поддерживается всеми браузерами
• PNG — растровый с прозрачностью. Используйте как fallback и для email. Разрешение: минимум 2x (retina)
• ICO / PNG 32×32 — favicon для вкладки браузера
• AI / EPS — исходники для печати. Храните, но на сайт не загружайте

Размеры для сайта

• Шапка: высота 30–60px, ширина пропорциональная. Не больше, иначе занимает слишком много места
• Favicon: 32×32, 180×180 (Apple Touch), 192×192 (Android)
• Open Graph: логотип внутри изображения 1200×630 для шеринга в соцсетях
• Мобильная версия: часто используется только символ без текста

Варианты для разных фонов

Логотип нужен минимум в трёх вариантах:

• Основной — для белого/светлого фона
• Инвертированный — для тёмного фона и тёмной темы
• Монохромный — чёрный и белый варианты для печати

Ошибки при создании логотипа для сайта

• Слишком детальный — мелкие элементы исчезают при уменьшении
• Зависимость от цвета — логотип должен читаться в чёрно-белом варианте
• Растровый формат — JPEG/PNG без SVG = размытый логотип на Retina
• Нет адаптивной версии — полный логотип не помещается в мобильную шапку
• Трендовость — логотип в стиле текущего года устареет через 2–3 года

Как заказать логотип

При заказе логотипа для сайта попросите дизайнера предоставить:

• SVG-файл (векторный исходник)
• PNG в нескольких размерах (1x и 2x)
• Все цветовые варианты (светлый фон, тёмный фон, моно)
• Favicon-набор (ICO + PNG)
• Мини-гайд по использованию (охранное поле, минимальный размер)

Нужен логотип для нового сайта? Мы создаём логотипы в рамках разработки сайтов и как отдельную услугу. Оставьте заявку для обсуждения.