Логотип компании в письмах — это якорь узнаваемости и гарант того, что получатель видит отправителя, которому доверяет. Размещайте логотип в шапке, делайте кликабельным (с UTM-метками), оптимизируйте вес и контраст под тёмные режимы, добавляйте корректный alt-текст. Без логотипа письмо сложнее атрибутировать бренду и вы теряете часть доверия.
Роль логотипа в письмах
Что логотип делает в email? Логотип — это краткая форма идентичности: фирменный знак и/или знак-слово, который подтверждает источник письма, повышает узнаваемость кампаний, ускоряет сканирование шапки и задаёт тон визуального ряда. В потоке входящих, где «картинка компания» решает секунды внимания, этот логотип работает как стоп-фактор.
- Доверие: визуальная валидация отправителя на уровне первого экрана.
- Навигация: кликабельный логотип — быстрый путь на сайт/раздел.
- Консистентность: связывает письмо с остальными точками контакта (сайт, соцсети, приложение).
- Доступность: текстовый alt помогает понять контент, даже если изображения скрыты.
Логотип это не «просто картинка». Он должен быть читаемым, контрастным и уместным по размеру, чтобы не перетягивать внимание с ключевого call to action.
Технические требования к изображениям логотипа и бренда
Форматы логотипа и бренда: когда и зачем использовать
| Формат | Поддержка в почтовых клиентах | Плюсы | Минусы | Рекомендация |
| PNG | Широкая | Чёткие края, прозрачность | Больше вес, чем JPG | Основной вариант для логотипа компании |
| JPG/JPEG | Широкая | Меньший вес | Нет прозрачности, артефакты | Только для полноцветных эмблем на сплошном фоне |
| GIF | Широкая | Простая анимация | Плохая палитра, тяжёлый | Избегать; не анимируйте логотип без необходимости |
| SVG | Ограниченная | Идеальная резкость | Не поддерживается рядом клиентов | Не использовать в продакшн-рассылках |
| WebP/AVIF | Ограниченная | Высокая компрессия | Плохая кросс-поддержка | Избегать для email |
Размеры, вес и ретина логотипа в письмах
- Оптимальная высота логотипа в шапке: 24–48 px (рендер), ширина пропорционально. Для ретины экспортируйте 2× (например, 48 px визуально = 96 px в файле) и задавайте width/height в HTML для нужного рендера.
- Вес: до 20–40 КБ для логотипа; следите за общим размером письма (HTML + ресурсы). HTML содержимое держите до ~100 КБ, чтобы избежать обрезки в Gmail.
- Компрессия: lossless для PNG (TinyPNG/похожие), аккуратно чистите метаданные.
Хостинг и встраивание логотипа и бренд-изображений
- Хостите изображения по HTTPS на стабильном домене/CDN. Абсолютные URL.
- Избегайте data URI/base64: часть клиентов режет, увеличивает объём HTML.
- CID-вложения повышают доставку картинок офлайн, но раздувают письмо и кэшируются хуже. Для массовых рассылок предпочтительны внешние ссылки.
- Обязательно указывайте width и height в атрибутах, чтобы избежать скачка верстки при загрузке.
Размещение логотипа и бренда: шапка и подпись
Шапка письма
- Позиция: верхний левый угол или центр — так быстрее считывается бренд.
- Ссылка: ведите на главную/хаб, добавляйте UTM (utm_source=email, utm_medium=newsletter, utm_campaign=name, utm_content=logo).
- Отступы: дайте «воздух» 12–24 px, чтобы фирменный знак не слипался с навигацией.
- Контраст: поместите логотип на сплошной фон бренда (не на фотографию), особенно если у вас тонкие линии.
- Текстовый дубль: если знак-символ без слова, добавьте рядом бренд нейтивным текстом в системе шрифтов.
Логотип в подписи отправителя: как разместить
- Размер: компактно — 16–24 px по высоте, чтобы не «ломать» строку.
- Расположение: слева от имени/должности или под ними. Не ставьте тяжёлые баннеры.
- На случай «без логотипа»: бренд обязательно дублируется текстом — «Компания Логотип» как название отправителя и в подписи.
- Ссылки: логотип в подписи можно не линкировать, чтобы не размывать главный CTA.
Alt-тексты для логотипа и доступность бренда
- Alt-текст: описательный и краткий — «Логотип компании N» или «Фирменный знак N». Избегайте «этот логотип» или «картинка компания» — это бесполезно для скринридеров.
- Title атрибут часто игнорируется; делайте ставку на alt и понятный контекст.
- Размер кликабельной области минимум 44×44 px для мобильных; добавляйте padding контейнеру.
- Контраст: если логотип текстовый (wordmark), обеспечьте контраст не ниже 4.5:1 относительно фона шапки.
- Текстовые дубли: важные сведения о бренде (название, юридическое лицо) дублируются живым текстом рядом с изображением.
Тёмные режимы, ретина и отображение логотипа
Тёмные режимы для логотипа и бренд-элементов
- Инверсия: ряд клиентов насильной инвертирует светлые/тёмные цвета. Белые логотипы на прозрачном фоне могут «исчезнуть». Решение: поместите логотип на стабильный фон (например, брендовый прямоугольник).
- Две версии логотипа: светлая и тёмная. Переключение через CSS медиа-запросы работает не везде; используйте fallback — единый контрастный блок-фон для обеих тем.
- Избегайте тонких линий и светло-серых оттенков — в тёмном режиме теряются.
Ретина и чёткость логотипа в письмах
- Экспортируйте 2× и даже 3× версии, но задавайте целевой размер в HTML атрибутах.
- Проверяйте на мобильных экранах iOS/Android: не должно быть замыливания или пересвета.
- Иконки внутри логотипа рендерьте со снапом к пикселю, избегая полу-пикселей.
Частые ошибки с логотипом и брендом и их исправление
- Слишком большой логотип «съедает» первый экран. Исправление: ограничьте высоту 24–48 px, перенесите акценты на заголовок и CTA.
- Прозрачный белый знак на переменном фоне теряется. Исправление: добавьте фоновой блок или обводку 1–2 px с альфой.
- Без логотипа в шапке — низкая узнаваемость. Исправление: минимум текстовый нейминг бренда системным шрифтом и маленький знак слева.
- SVG/WebP не рендерится у части получателей. Исправление: используйте PNG/JPG, протестируйте в популярных клиентах.
- Нет alt-текста. Исправление: добавьте осмысленный alt («Логотип компании X»), чтобы письмо было понятно при блокировке изображений.
- Тяжёлое изображение. Исправление: экспортируйте ровно под нужный размер, оптимизируйте и кэшируйте через CDN.
- Размытый логотип на ретине. Исправление: 2× экспорт + фиксированные width/height атрибуты.
- Отсутствует ссылка/метки. Исправление: сделайте логотип кликабельным и добавьте UTM для атрибуции.
- Фоновая картинка с логотипом в CSS. Исправление: вставляйте логотип контентным IMG — фоновые изображения часто режутся.
Итог: единые правила для фирменного знака в email просты — читаемость, контраст, лёгкий вес, техническая совместимость и доступность. Так логотип компании работает на открываемость и доверие, а не мешает основному сценарию письма.