Форматы логотипа: какие файлы нужны и для чего

Логотипу нужен пакет файлов: вектор — SVG для сайта, PDF или EPS для типографии и вывесок, — PNG с прозрачным фоном для документов и соцсетей и исходник для будущих правок. Каждый файл — в нескольких версиях: цветной и одноцветной, для светлого и тёмного фона, отдельно знак. Ниже — что есть что и куда отправлять каждый файл.

Вектор и растр: в чём разница простыми словами

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

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

Проверить файл просто: откройте его и увеличьте до упора. Вектор останется чётким, растр рассыплется на квадратики.

Векторные форматы: SVG, PDF, EPS и AI

• SVG — формат для сайта и интерфейсов. Браузер показывает его чётким на любом экране, файл весит немного, а цвет можно менять кодом — например, для тёмной темы. SVG открывают Figma и векторные редакторы, а вот в типографию его обычно не отправляют.
• PDF — главный файл для печати: его принимают типографии, производства вывесок и упаковки. Но PDF — лишь контейнер, внутри может оказаться и вектор, и обычная картинка. Увеличьте его: если края букв поплыли, это растр в обёртке PDF.
• EPS — старый формат для печати. Его до сих пор просят некоторые производства вывесок и сувенирной продукции, поэтому файл полезно держать в пакете.
• AI — рабочий файл Adobe Illustrator, то есть исходник. Он нужен дизайнеру, который будет дорабатывать логотип. Если знак рисовали в другой программе, исходником будет её файл — например, CDR из CorelDRAW или файл в Figma.

В файлах для печати текст переводят в кривые: буквы становятся обычными фигурами. Тогда типографии не нужен ваш шрифт, и надпись не подменится похожим шрифтом на чужом компьютере. Редактируемый текст остаётся только в исходнике.

Растровые форматы: PNG и JPG

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

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

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

Цвета: RGB и HEX для экрана, CMYK и Pantone для печати

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

• RGB — цвет экрана, смешанный из красного, зелёного и синего света. HEX — тот же цвет в виде кода для сайта, например #1F6FEB.
• CMYK — печать четырьмя красками: голубой, пурпурной, жёлтой и чёрной. Экран светится, а бумага отражает свет, поэтому часть ярких экранных цветов краской не повторить: кислотный зелёный или сочный синий в печати выходят приглушённее.
• Pantone — номер из каталога эталонных цветов. По нему типография заранее смешивает краску нужного оттенка, и цвет совпадает на визитке, пакете и коробке. Pantone нужен, когда точность цвета важна: упаковка, фирменная полиграфия, сувениры.

Поэтому в пакете два набора файлов: для экрана — в RGB, для печати — в CMYK или с цветами Pantone. Автоматический перевод из RGB в CMYK может дать тусклый или грязный оттенок, так что печатные цвета подбирает дизайнер и проверяет на пробной печати. Как выбрать сами цвета и сколько их нужно, — в статье про фирменные цвета.

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

Формат отвечает на вопрос «каким файлом», версия — «каким логотипом». В полный пакет входят:

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

Каждая версия — в векторе и в PNG, в цветах для экрана и для печати. Файлов набирается много, и это нормально: главное, чтобы нужный находился за минуту.

Вместе с файлами нужны правила: охранное поле — свободное место вокруг логотипа — и минимальный размер, меньше которого логотип не уменьшают. Как их задают и что ещё описывают в правилах, разобрали в статье про брендбук и гайдлайн.

Фавикон и аватарка: логотип в маленьком размере

Фавикон — значок сайта во вкладке браузера, в закладках и рядом с адресом в результатах Яндекса и Google. Во вкладке это квадрат 16 на 16 пикселей, поэтому полный логотип туда не влезет: нужен знак или буква, прорисованные отдельно, с толстыми линиями. Значок должен быть квадратным и читаться и на светлой, и на тёмной теме. Для сайта готовят набор: SVG, маленький PNG или ICO и картинку 180 на 180 пикселей — её iPhone показывает, когда сайт добавляют на экран «Домой».

Аватарка — квадратный PNG с запасом по краям. Соцсети и мессенджеры чаще всего показывают её в круге, так что всё важное должно поместиться в центре. Проверьте её в самом маленьком виде — в списке чатов: если знак превращается в пятно, нужна упрощённая версия.

Какой файл куда: таблица

Файл	Куда	На что обратить внимание
SVG	Сайт, интерфейсы, Figma	Текст в кривых, нет лишних скрытых слоёв
PDF	Типография: визитки, бланки, буклеты, упаковка	Внутри вектор, цвета в CMYK или Pantone, текст в кривых
EPS	Вывески, наружная реклама, сувенирка — если просят	Текст в кривых
AI, CDR или файл Figma	Дизайнер, который будет дорабатывать логотип	Названия шрифтов и лицензии к ним
PNG с прозрачным фоном	Презентации, документы, подпись в письме, соцсети	Несколько размеров, версии для светлого и тёмного фона
JPG	Сервисы, которые принимают только его	Только на белом фоне
SVG, ICO и PNG для фавикона	Вкладка браузера, закладки, поиск, экран телефона	Квадрат, упрощённый знак
Квадратный PNG	Аватарка в соцсетях и мессенджерах	Знак в центре, круг его не обрезает

Сложите всё в одну папку с понятными подпапками — «Вектор», «PNG», «Фавикон», «Цвета» — и называйте файлы по содержимому: «logo-horizontal-white.svg» понятнее, чем «final-2-new.svg». Храните папку в облаке, а не в переписке, и давайте ссылку каждому новому подрядчику.

Частые ошибки

• Логотип есть только картинкой из мессенджера или скриншотом с сайта.
• PDF «в векторе», внутри которого обычная картинка.
• Текст не переведён в кривые — типография подставляет похожий шрифт.
• Цвета только для экрана: на визитке фирменный синий выходит другим.
• Нет белой версии, и на тёмную фотографию логотип ставят с белой плашкой.
• Фавикон — уменьшенный полный логотип, в котором ничего не разобрать.
• Старые и новые файлы лежат вперемешку, и на вывеску уходит прошлая версия.

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