Я Максим, веб-разработчик. За годы работы я видел сотни логотипов — от идеально подготовленных до таких, которые приходилось буквально спасать. Дизайн логотипа — задача дизайнера. Но подготовка логотипа для веба — это техническая работа, от которой зависит, как ваш бренд выглядит на экранах пользователей. Размытый логотип на Retina-дисплее, битый фавикон или логотип, который «ломается» на мобильном — всё это реальные проблемы, которые я регулярно исправляю на клиентских сайтах. Давайте разберём всё подробно.

Почему формат логотипа имеет значение

Логотип на сайте — не просто картинка. Он загружается на каждой странице сайта, отображается на разных устройствах с разным разрешением экрана и должен выглядеть одинаково чётко везде — от iPhone SE до 4K-монитора. Неправильный формат — это лишние килобайты при загрузке (на каждой странице), размытость на современных экранах или артефакты сжатия, которые делают бренд «дешёвым» в глазах посетителя.

Особенно критично это для мобильных пользователей. Логотип в шапке — первое, что видит человек при заходе на сайт. Если он размытый или обрезанный — первое впечатление испорчено. А первое впечатление о сайте формируется за полсекунды.

Форматы файлов: какой выбрать и почему

SVG — мой стандартный выбор

SVG (Scalable Vector Graphics) — векторный формат, который масштабируется до любого размера без потери качества. На экране смартфона, планшета, 27-дюймового монитора или 4K-телевизора ваш логотип будет одинаково чётким. Файл SVG обычно весит от 2 до 15 килобайт — это ничтожно мало по сравнению с растровыми форматами.

Преимущества SVG для логотипа: он идеально резкий на любом разрешении экрана, весит минимально, поддерживает прозрачность, поддерживает CSS-стилизацию (можно менять цвета логотипа через стили — это бесценно для тёмной темы), поддерживает анимацию средствами CSS и JavaScript.

Я рекомендую SVG как формат по умолчанию для любого логотипа, который состоит из векторных элементов — текста, геометрических фигур, иконок. Это 95% всех логотипов.

Единственное ограничение SVG — если логотип содержит сложные растровые эффекты (фотографические текстуры, многослойные тени, градиенты с растровыми элементами). Такие логотипы лучше экспортировать в PNG. Но это редкость — большинство профессиональных логотипов создаются в векторных редакторах (Adobe Illustrator, Figma) и отлично конвертируются в SVG.

PNG — запасной вариант

PNG (Portable Network Graphics) — растровый формат с поддержкой прозрачности. Используйте его только тогда, когда SVG недоступен или нецелесообразен. Типичные ситуации: логотип содержит растровые элементы, которые невозможно векторизовать, или вы получили логотип только в растровом формате и нет возможности перевести в вектор.

Если используете PNG — обязательно готовьте две версии. Обычную (1x) — для стандартных экранов. И Retina-версию (2x) — с удвоенными размерами в пикселях, для экранов с высокой плотностью пикселей. Без Retina-версии логотип будет заметно размытым на iPhone, iPad, MacBook и большинстве современных Android-устройств, а это более половины вашей аудитории.

Пример: если логотип в шапке отображается размером 200×50 пикселей, подготовьте файл 400×100 пикселей для Retina и подключите его через атрибут srcset или медиа-запрос CSS.

JPEG — категорически нет

JPEG не подходит для логотипов по двум причинам. Во-первых, JPEG не поддерживает прозрачность — логотип всегда будет на непрозрачном фоне, что делает невозможным его использование на цветных секциях сайта. Во-вторых, алгоритм сжатия JPEG создаёт артефакты — характерные «шумы» вокруг контрастных границ. На фотографии это незаметно, а на плоских цветах логотипа — бросается в глаза. Никогда не используйте JPEG для логотипа.

WebP — допустимая альтернатива

WebP поддерживает прозрачность и весит меньше, чем PNG при сопоставимом качестве. Если по какой-то причине SVG не подходит — WebP лучше, чем PNG. Но SVG всё равно остаётся приоритетным форматом, потому что он векторный и не требует отдельных файлов для разных разрешений экрана.

Размеры логотипа для разных мест на сайте

Шапка сайта (header)

Шапка — основное место размещения логотипа. Здесь он виден на каждой странице и кликает на главную. Оптимальная высота логотипа в шапке — от 30 до 60 пикселей, в зависимости от высоты самой шапки и общего дизайна. Ширина — пропорциональная, обычно не больше 200 пикселей.

На мобильных устройствах шапка компактнее, и логотип нужно уменьшать. Типичная высота на мобильном — 24–40 пикселей. Если логотип горизонтальный и длинный — на маленьком экране он может занять слишком много места. В этом случае я использую адаптивный логотип: полная версия на десктопе, сокращённая (иконка или аббревиатура) на мобильном.

Адаптивный логотип — это не прихоть, а необходимость. На экране шириной 320 пикселей горизонтальный логотип с длинным названием компании просто не помещается. Решение — подготовить две версии: полную (логотип + текст) и компактную (только иконка). Переключение между ними — через CSS-медиазапросы или тег picture с атрибутами source для разных размеров экрана.

Подвал сайта (footer)

В подвале логотип обычно размещается чуть крупнее, чем в шапке, или в таком же размере. Важный нюанс — если подвал сайта тёмный, а логотип разработан для светлого фона — нужна инвертированная версия. Тёмный логотип на тёмном фоне — распространённая ошибка, которую я вижу регулярно. Если логотип в SVG — инверсия делается через CSS (смена цвета fill). Если в PNG — нужен отдельный файл.

Favicon — маленькая, но критически важная деталь

Favicon — это миниатюрная иконка, которая отображается во вкладке браузера, в закладках, на домашнем экране мобильного устройства и в результатах поиска Яндекса. По моей статистике, около 30% сайтов малого бизнеса до сих пор не имеют фавикона — вкладка в браузере показывает дефолтную пустую иконку. Это непрофессионально и снижает доверие.

Для фавикона нужно подготовить несколько размеров. ICO-файл 16×16 и 32×32 — классический фавикон для десктопных браузеров. PNG 180×180 — Apple Touch Icon для iOS (когда пользователь добавляет сайт на домашний экран iPhone). PNG 192×192 и 512×512 — для Android и PWA-приложений. Также полезно добавить manifest.json (или site.webmanifest), в котором указаны пути к иконкам — браузеры Android и Chrome его считывают.

Важный момент: фавикон — это обычно упрощённая версия логотипа. Полный логотип с текстом в формате 16×16 пикселей будет нечитаемым. Используйте только иконическую часть логотипа — символ, первую букву, графический элемент. Если у компании нет иконической части логотипа — это повод её создать.

Для генерации всех необходимых размеров фавикона я пользуюсь сервисом realfavicongenerator.net — загружаете одну картинку, получаете комплект файлов и HTML-код для подключения. Занимает буквально пару минут.

Open Graph и социальные сети

Когда ссылку на ваш сайт отправляют в мессенджере или публикуют в соцсети — отображается превью с картинкой. Эта картинка задаётся через мета-теги Open Graph. Для корпоративных страниц (главная, «О компании», контакты) в качестве OG-изображения часто используют логотип. Рекомендуемый размер — 1200×630 пикселей. Логотип размещается по центру на фирменном фоне.

Как правильно добавить логотип в код сайта

Инлайн-SVG — максимум контроля

Инлайн-SVG означает, что SVG-код логотипа вставляется прямо в HTML-разметку. Преимущество — полный контроль над элементами логотипа через CSS. Можно менять цвета при наведении, анимировать элементы, автоматически переключать цвет логотипа при активации тёмной темы.

Минус инлайн-SVG — код логотипа загромождает HTML. Для сложных логотипов SVG-код может занимать несколько десятков строк. Решение — вынести SVG в отдельный компонент (в React) или использовать серверный include.

Тег img — проще, но без кастомизации

Если вам не нужна CSS-кастомизация логотипа — вставляйте SVG через обычный тег img. Это проще, код чище, браузер кэширует файл. Но поменять цвета логотипа через CSS не получится.

Обязательно добавляйте атрибут alt с текстом вроде «Логотип компании [название]». Это нужно для SEO (поисковик понимает, что на изображении) и для доступности (скринридеры озвучат текст незрячим пользователям).

Тег picture — для адаптивного логотипа

Тег picture позволяет задать разные версии логотипа для разных размеров экрана. Это идеальное решение для адаптивного логотипа — полная версия для десктопа и компактная для мобильного.

Логотип и тёмная тема: что нужно предусмотреть

Тёмная тема (dark mode) — уже не тренд, а стандарт. Большинство пользователей переключают свои устройства в тёмный режим, и сайт должен это поддерживать. А значит, логотип тоже должен работать на тёмном фоне.

Если логотип в SVG и вставлен инлайн — достаточно добавить CSS-правило в медиазапрос prefers-color-scheme: dark и поменять цвет fill на светлый. Если логотип в PNG — нужно подготовить отдельный файл для тёмной темы и переключать его через CSS или JavaScript.

Я рекомендую продумывать поддержку тёмной темы на этапе разработки фирменного стиля. Попросите дизайнера подготовить два варианта логотипа — для светлого и тёмного фона. Это сэкономит время и деньги при разработке сайта.

Частые ошибки, которые я исправляю на проектах

Растянутый или сжатый логотип. Случается, когда в CSS задана фиксированная ширина и высота, не соответствующая пропорциям логотипа. Решение — задавать только один параметр (ширину или высоту), а второй оставить auto.

Размытый PNG на Retina-экранах. Логотип подготовлен в размере 200×50, а на Retina отображается на площади 400×100 физических пикселей — и растягивается с потерей чёткости. Решение — SVG (масштабируется без потерь) или PNG 2x с CSS ограничением по размеру.

Логотип не виден на цветном фоне. Белый логотип на белом фоне или чёрный на тёмном — встречается чаще, чем вы думаете. Особенно когда дизайн сайта менялся, а логотип остался прежним. Решение — подготовить несколько цветовых вариантов.

Отсутствие фавикона. Пустая вкладка в браузере — признак непрофессионального сайта. Потратьте пять минут на генерацию фавикона — это мелочь, которая влияет на восприятие.

Логотип без ссылки на главную. Стандартное ожидание пользователя — клик по логотипу ведёт на главную страницу. Если логотип не обёрнут в ссылку — это нарушение UX-конвенции.

Слишком «тяжёлый» логотип. PNG-логотип весом 500 КБ на каждой странице — это неоправданная нагрузка. Оптимизируйте: SVG должен весить до 15 КБ, PNG — до 50 КБ максимум.

Чек-лист: подготовка логотипа для сайта

Перед запуском сайта убедитесь, что у вас есть всё необходимое. SVG-файл логотипа, очищенный от лишнего (без скрытых слоёв, без лишних метаданных из редактора). Версия для тёмного фона — либо отдельный файл, либо CSS-переключение цвета для инлайн-SVG. Компактная версия для мобильных — только иконическая часть без текста. Полный набор фавиконов — ICO, Apple Touch Icon, Android-иконки. OG-изображение — логотип на фирменном фоне размером 1200×630 пикселей.

Логотип — лицо вашего сайта и бренда в цифровом пространстве. Подготовьте его технически правильно один раз, и он будет работать на вас годами без дополнительного внимания.