Коротко. Для шапки сайта логотип готовят с запасом по высоте 120-180 px при отображении 32-56 px — запас нужен для ретины и будущего масштабирования. Основной файл — SVG без ограничения по размеру, PNG делают в 2-3 раза больше видимого размера (например, 300×90 px для показа 150×45 px) с прозрачным фоном. Вес одного логотипа не должен превышать 15-30 КБ, иначе он тормозит первую отрисовку страницы.
Почему «один размер» не работает
Логотип в шапке сайта показывается одновременно в трёх-четырёх разных физических размерах: на обычном мониторе, на экране с ретиной (Retina, устройства Apple и многие Android-флагманы), на мобильном при уменьшенной шапке и иногда в свёрнутом виде при скролле. Если подготовить один PNG-файл ровно под видимый размер в CSS, на ретине он растянется браузером и станет заметно мутным — не из-за плохого исходника, а потому что у экрана физически больше пикселей на тот же логический дюйм.
Отсюда правило: готовить растровый файл нужно не под то, что видит глаз, а под то, что физически рисует экран — с запасом в 2-3 раза.
Сколько пикселей готовить: таблица под задачи
| Место показа | Видимая высота (CSS) | Реальный размер файла PNG | Комментарий |
|---|---|---|---|
| Шапка десктоп | 40-56 px | 120-170 px | Запас ×3 под ретину и будущий редизайн |
| Шапка мобильная | 28-36 px | 84-110 px | Тот же файл, что для десктопа, просто отдаётся меньшим CSS-размером |
| Favicon / иконка вкладки | 16-32 px | 32×32, 16×16, плюс 180×180 для iOS | Отдельный простой знак, не полный логотип с текстом |
| Превью в соцсетях (OG-картинка) | — | 1200×630 px | Логотип на фирменной подложке, не голый файл на прозрачном фоне |
| Печать (визитки, вывеска) | — | вектор, не пиксели | PNG для печати не подходит — нужен AI, EPS или PDF |
Правило «×3 от видимого размера» закрывает даже экраны с плотностью 3x (iPhone Pro), которых в реальном трафике меньшинство, но встречаются.
Что такое ретина и почему это не про SVG
Retina — маркетинговое название Apple для экранов с плотностью пикселей выше стандартной (2x и выше). На таком экране CSS-пиксель физически состоит из 4 (при 2x) или 9 (при 3x) реальных пикселей матрицы. Растровая картинка, подготовленная «впритык» под CSS-размер, при отдаче на такой экран растягивается интерполяцией браузера — и логотип теряет резкость на краях букв и тонких линиях.
Для SVG эта проблема не существует физически: векторное изображение рисуется браузером под фактическое разрешение экрана в момент показа, поэтому один и тот же SVG-файл одинаково резкий и на обычном мониторе, и на экране 3x. Это одна из причин, почему SVG стал стандартом для логотипов в вебе. Если верстальщик уже занимается сборкой шапки на разработке сайта, обычно проще сразу поручить ему подготовку всех размеров и форматов, чем разбираться с этим отдельно.
Если по какой-то причине приходится работать с растром (например, логотип с градиентами или фотографическими элементами, которые SVG не поддерживает нормально), то ретина закрывается только подготовкой файла с запасом, а не программным трюком.
Вес файла: почему 200 КБ логотип — это проблема
Логотип в шапке загружается на каждой странице сайта и часто оказывается частью критического пути отрисовки — браузер должен получить и отрисовать шапку до того, как пользователь увидит хоть что-то полезное. Раздутый файл логотипа (несжатый PNG на 300-500 КБ, PNG с альфа-каналом без оптимизации) добавляет заметную задержку именно в тот момент загрузки, который сильнее всего влияет на восприятие скорости.
- SVG-логотип без градиентов и растровых вставок — обычно 2-8 КБ, если экспортирован из Figma или Illustrator и прогнан через оптимизатор (SVGO, встроенный в большинство онлайн-инструментов);
- PNG-логотип на прозрачном фоне размером 150×45 px — 5-15 КБ после сжатия;
- Тревожный порог — 30 КБ на один файл логотипа. Выше этого почти всегда означает неоптимизированный экспорт: несжатый PNG-24, встроенный ICC-профиль, лишние метаданные.
Проверить вес и формат логотипа на своём сайте можно за минуту — открыть шапку в браузере, посмотреть вкладку Network в инструментах разработчика и найти файл логотипа в списке запросов. Если логотип оказался одним из многих тяжёлых файлов на сайте, стоит посмотреть на скорость загрузки в целом — это ближе к теме SEO-аудита, чем к самому логотипу.
Прозрачный фон и охранное поле
Логотип для шапки сайта почти всегда нужен на прозрачном фоне — белая подложка вокруг знака превращается в заметный прямоугольник, если фон сайта или тёмная тема отличается от белого. PNG с прозрачностью (alpha-канал) и SVG оба поддерживают это без проблем; JPEG — нет, поэтому JPEG для логотипов в вебе не используют вообще.
Второй момент, который часто упускают при подготовке файла, — охранное поле: минимальный отступ вокруг логотипа, внутри которого не должно быть других элементов интерфейса. Если верстальщик поставит логотип впритык к пункту меню без этого отступа, знак визуально слипается с соседними элементами и выглядит небрежно даже при идеальном исходном файле.
Логотип в тёмной теме сайта
Если у сайта есть тёмная тема (переключатель light/dark или системная адаптация), одного файла логотипа недостаточно. Тёмный логотип на тёмном фоне становится нечитаемым, светлый — наоборот нечитаем на светлом. Практическое решение — держать два SVG-файла (светлую и тёмную версию) и переключать их через CSS или атрибут темы, либо, если логотип однотонный, использовать SVG с заливкой через CSS-переменную currentColor, которая наследует цвет от родителя и меняется автоматически вместе с темой без второго файла.
Второй вариант экономичнее по весу и проще в поддержке, но работает только для логотипов без градиентов и многоцветных элементов — для сложных знаков всё равно нужны два файла.
Частые вопросы
Какого размера должен быть исходный файл логотипа, который отдаёт дизайнер?
Векторный (AI, EPS, SVG) — без ограничения по размеру, это его смысл. Если дизайнер отдаёт только растр, минимально приемлемый исходник — 1000×1000 px и больше, чтобы из него можно было нарезать любые размеры без потери качества.
Можно ли просто загрузить логотип 2000×2000 px и уменьшить его через CSS?
Технически да, но это лишняя нагрузка: браузер скачает файл на несколько сотен килобайт, чтобы показать логотип высотой 40 px. Правильно — подготовить отдельный файл под реальный диапазон показа (см. таблицу выше), а не отдавать исходник максимального размера.
Почему на ретине логотип выглядит размытым, хотя на обычном мониторе всё нормально?
Файл подготовлен впритык под CSS-размер без запаса. Решение — пересобрать логотип в SVG либо экспортировать PNG в 2-3 раза больше видимого размера.
Нужен ли отдельный размер логотипа для favicon?
Да, favicon — это не уменьшенный логотип с текстом, а отдельно скомпонованный простой знак 32×32 и 16×16 px, плюс версия 180×180 px для иконки на экране iOS. Полный логотип с надписью в размере 16×16 px превращается в нечитаемое пятно.
Сколько стоит подготовить логотип во всех нужных размерах и форматах?
Если исходный вектор уже есть, нарезка под сайт (SVG + PNG + favicon-набор + OG-картинка) занимает у верстальщика 1-2 часа. Если вектора нет и логотип есть только как растровая картинка низкого разрешения, сначала нужно отрисовать его в векторе — это отдельная работа на 3 000-8 000 ₽ в зависимости от сложности знака.
Проверить, как логотип отдаётся на вашем сайте
Посмотрим вес файла, формат и поведение на ретине и в тёмной теме, укажем, что стоит пересобрать.