Логотип для сайта: что входит в комплект, кроме самой картинки

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

Векторный файл — обязательная основа

Логотип должен существовать в векторном формате: SVG, AI или EPS. Вектор — это не картинка из пикселей, а набор математических кривых, поэтому знак можно увеличить до размера баннера на фасаде или уменьшить до значка на favicon без потери качества. Растровый файл (JPG, PNG) при таком масштабировании либо размывается, либо становится «лесенкой» на краях.

Для сайта критичен именно SVG — современный веб-стандарт, который браузер отрисовывает как код, а не как изображение. Логотип в SVG весит в разы меньше PNG той же чёткости и остаётся резким на экранах с высокой плотностью пикселей. Если верстальщик получает от вас только JPG «с рабочего стола», он либо тратит время на перерисовку логотипа в вектор, либо ставит в шапку размытую картинку — и это будет видно на любом экране крупнее смартфона.

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

Набор PNG под конкретные задачи

Вектор — рабочий файл для дизайнера и верстальщика, но не всем инструментам он нужен. Для загрузки в конструктор сайта, в личный кабинет соцсети или в презентацию удобнее растровый PNG с прозрачным фоном — без белого прямоугольника вокруг знака, который иначе придётся вырезать вручную.

В комплект должно входить несколько PNG-файлов разного размера: под шапку сайта, под подвал (часто логотип там мельче или в одну краску), под печать на визитке или бланке, под крупный формат — баннер, вывеску, роллап. Один файл на все случаи не подходит: логотип, оптимизированный под мелкий размер в шапке, на баннере метровой ширины будет выглядеть пустым, а детализированный вариант для печати в шапке сайта — перегруженным.

Упрощённая и монохромная версии

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

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

Favicon и версии для соцсетей

Favicon — маленькая иконка сайта во вкладке браузера и в закладках — почти никогда не совпадает с логотипом один в один. Полный горизонтальный логотип с текстом в размере 16×16 пикселей превращается в нечитаемое пятно, поэтому для favicon берут только знак, без надписи, и адаптируют пропорции под квадрат. Комплект должен включать готовый файл в форматах ICO и PNG нужных размеров (обычно 16, 32, 180 и 512 пикселей) — иначе эту адаптацию придётся заказывать отдельно уже после запуска сайта.

То же самое с соцсетями: аватар в Telegram, VK или на маркетплейсе — круглая или квадратная область, куда полный логотип с текстом обычно не помещается целиком. Нужна версия знака, обрезанная и отцентрованная под круглую и квадратную область, плюс, если есть страницы компании, — обложка нужного разрешения под каждую площадку. Без этого начинается ручная подгонка каждый раз, когда бизнес открывает новую соцсеть.

Фирменные цвета и шрифты с кодами

Логотип редко существует отдельно от остального сайта: цвет кнопок, ссылок, акцентов на сайте обычно берут из логотипа, чтобы оформление выглядело цельным. Для этого нужны не просто «синий» и «оранжевый», а точные коды — HEX для веба, при необходимости RGB и CMYK для печати. Без кодов каждый новый исполнитель будет подбирать цвет на глаз, и оттенок на сайте, в презентации и на вывеске начнёт расходиться.

Аналогично со шрифтами: если в логотипе использован фирменный шрифт текстовой части, стоит зафиксировать его название и, если это не логотип-надпись отдельным начертанием, а рабочий шрифт для сайта и документов — файл или ссылку на лицензионный источник. Это не обязательный, но полезный пункт: он экономит время дизайнеру, который будет верстать баннеры или презентации в вашем стиле после запуска сайта.

Минимальный гайдлайн — что должно быть внутри

Гайдлайн для малого бизнеса не обязан быть брендбуком на 40 страниц — это скорее памятка на 1–3 листа, которая экономит время в будущем. Минимальный состав:

• охранное поле вокруг логотипа — минимальный отступ, чтобы рядом не лепили текст или другие элементы;
• минимальный размер, при котором знак ещё читаем;
• список версий и когда какую использовать (основная, упрощённая, монохромная светлая/тёмная);
• фирменные цвета и шрифты с кодами;
• что делать нельзя: растягивать пропорции, менять цвет произвольно, накладывать на пёстрый фон без подложки, поворачивать знак.

Такой документ решает конкретную проблему: когда логотип передают новому подрядчику — печатнику, таргетологу, автору баннеров — не нужно объяснять правила заново или созваниваться с прежним дизайнером. Файл с исходниками и гайдлайн передают вместе, и результат совпадает с ожиданиями с первого раза.

Практический вывод: что проверить перед запуском сайта

Перед тем как отдавать логотип в разработку сайта, проверьте комплект по пяти пунктам: вектор (SVG/AI), набор PNG с прозрачным фоном под разные размеры, упрощённая и монохромная версии, favicon и аватар для соцсетей, коды фирменных цветов. Если логотип заказывали давно и часть файлов потеряна или их никогда не было, дешевле восстановить недостающее заранее, чем оплачивать срочную доработку в разгар вёрстки сайта, когда всё остальное уже готово и ждёт только шапку с логотипом.

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