Профессиональный логотип должен работать в совершенно разных контекстах: маленьким на вкладке браузера в виде фавикона, средним в шапке сайта, большим на фасадном баннере, квадратным на аватарке Instagram и горизонтальным на визитке. У каждого из этих контекстов свои размеры и форматы — и использование неправильного размера приводит к размытому, обрезанному или искажённому логотипу.
Хорошая новость в том, что не нужно создавать разные версии с нуля для каждого случая. С правильным файлом в правильном формате Изменение размера изображения ImageTools подгонит размеры под любую задачу за секунды.
Форматы, которые нужно иметь для вашего логотипа
Прежде чем говорить о конкретных размерах, разберитесь, какие форматы файлов нужно хранить. Хорошо задокументированный логотип должен иметь как минимум эти версии:
- SVG (векторный): мастер-файл. Можно увеличить до любого размера — от фавикона 16px до баннера 10 метров — без потери качества. Незаменим для сайтов, презентаций и отправки в типографию.
- PNG с прозрачным фоном (высокое разрешение): для цифрового использования там, где SVG не принимается. Сохраняйте минимум 1000×1000px для гибкости при изменении размера.
- PNG с белым фоном: для контекстов, где прозрачность нежелательна или не поддерживается — формы регистрации на платформах, документы Word, email.
- PNG или JPG тёмная версия (элементы белым цветом): для использования на цветных или тёмных фонах. Логотип тёмно-синего цвета полностью исчезает на чёрном фоне.
- Фавикон (.ico + PNG): специальные версии для вкладки браузера. Используйте Генератор фавиконок ImageTools, чтобы сгенерировать все нужные размеры из логотипа.
☁️ Храните всё в облаке. Держите эти версии в Google Drive или Dropbox с лёгким доступом. Они понадобятся вам при найме дизайнера-фрилансера, обновлении профиля в соцсети или отправке материалов в типографию — часто срочно.
Справочная таблица — размеры логотипа по контексту
| Контекст | Рекомендуемые размеры | Идеальный формат | Примечание |
|---|---|---|---|
| Шапка сайта (десктоп) | 200–400px по ширине | SVG или прозрачный PNG | Высота пропорциональна макету |
| Фавикон (вкладка браузера) | 16×16, 32×32, 48×48px | .ico + PNG | Используйте генератор фавиконок |
| Apple Touch Icon (iOS) | 180×180px | PNG без прозрачности | Рекомендован сплошной фон |
| Иконка Android-приложения (PWA) | 192×192 и 512×512px | PNG | Требуется в webmanifest |
| Instagram — фото профиля | 320×320px (отображается в 110px) | PNG или JPG | Будет обрезано в круг |
| Facebook — фото профиля | 170×170px | PNG или JPG | Отображается в круге на десктопе |
| Facebook — обложка | 820×312px | JPG или PNG | Логотип как элемент, не всё фото |
| LinkedIn — логотип компании | 300×300px | PNG или JPG | Мин. 300×300, макс. 4 МБ |
| LinkedIn — обложка компании | 1128×191px | PNG или JPG | Логотип как элемент внутри обложки |
| YouTube — иконка канала | 800×800px | PNG или JPG | Отображается в круге, 98px на ТВ |
| YouTube — арт канала | 2560×1440px | JPG или PNG | Логотип как элемент, safe area: 1546×423px |
| WhatsApp Business — профиль | 640×640px | PNG или JPG | Отображается в круге |
| TikTok — фото профиля | 200×200px (мин.) | JPG или PNG | Отображается в круге |
| Twitter / X — фото профиля | 400×400px | PNG или JPG | Отображается в круге, 48px в ленте |
| Email (подпись) | 200–300px по ширине | PNG с белым фоном или JPG | Избегать прозрачности в старых клиентах |
| Визитка (цифровая) | 400–600px по ширине | Прозрачный PNG | Для компоновки в макете визитки |
| Презентация (слайды) | 200–400px по ширине | Прозрачный PNG или SVG | Пропорционально слайду (16:9) |
Логотип для сайта
Шапка (header)
В шапке сайта логотип обычно имеет ширину 150–400px, с пропорциональной высотой. Точная ширина зависит от макета — компактная шапка может использовать 150px, а сайт с большим пространством — 300–400px. Важнее всего, чтобы логотип был чётким на экранах Retina: экспортируйте PNG с удвоенной шириной отображения (или используйте SVG, который решает это автоматически) и позвольте CSS управлять размером отображения.
Всегда используйте SVG или PNG с прозрачным фоном в шапке — фон шапки меняется в зависимости от дизайна и прокрутки, и логотип с белым фоном создаст видимый белый прямоугольник на цветном фоне.
Фавикон
Фавикон — это иконка, отображаемая на вкладке браузера, в закладках и на главном экране мобильных устройств. Эффективный фавикон — это упрощённая версия логотипа, обычно только символ или инициал, без полного названия компании, так как места слишком мало для читаемого текста.
Необходимые размеры: 16×16px и 32×32px для десктопных браузеров, 180×180px для iOS (Apple Touch Icon) и 192×192px и 512×512px для Android и PWA. Используйте Генератор фавиконок ImageTools, чтобы автоматически сгенерировать все эти размеры из логотипа.
Сгенерируйте все размеры фавикона сразу
От логотипа до фавикона для браузеров, iOS, Android и PWA — все нужные размеры за секунды.
Сгенерировать фавикон бесплатноЛоготип для соцсетей
Почему логотип должен работать в квадратном и круглом формате
Практически все соцсети отображают фото профиля в круглом формате. Это создаёт особую проблему для горизонтальных логотипов (название + иконка рядом): в круглом пространстве логотип либо становится слишком маленьким для чтения, либо его части обрезаются по краям.
Самое эффективное решение — иметь «иконочную» версию логотипа: только символ или инициалы бренда, отцентрированные в квадратной области — специально для использования в качестве фото профиля в соцсетях. Эта версия сохраняет визуальную узнаваемость без проблем с обрезкой.
Instagram принимает фото профиля до 320×320px, но отображает их всего в 110px в профиле и 32px в ленте. Файл должен быть квадратным. Если логотип горизонтальный, разместите его по центру квадратной области с достаточными отступами, чтобы ничего не обрезалось круглой маской платформы.
Фото профиля страницы в Facebook отображается в 170×170px на десктопе и 128×128px на мобильных устройствах, всегда обрезано в круг. Обложка имеет размер 820×312px — на ней логотип обычно выступает как элемент дизайна обложки, а не занимает всё изображение.
Для профилей компаний LinkedIn отображает логотип в 300×300px (квадрат) на странице и в меньших размерах в списках. Это один из контекстов, где качество изображения сильнее всего влияет на восприятие профессионализма — используйте PNG высокого качества, без чрезмерного сжатия.
YouTube
Иконка канала на YouTube отображается в очень разных размерах в зависимости от контекста: 98px на смарт-ТВ, 32px в ленте на десктопе, 88px в профиле на мобильном. Файл должен быть минимум 800×800px, чтобы покрыть все эти размеры чётко. Арт канала (баннер) имеет размер 2560×1440px, но «safe area» — область, видимая на всех устройствах, — составляет всего 1546×423px по центру. Логотип должен находиться в пределах этой зоны.
WhatsApp Business
Фото профиля WhatsApp Business отображается в круге, с размером отображения около 50px в переписках. Используйте файл 640×640px, чтобы гарантировать чёткость в предпросмотре на весь экран. Как и в других соцсетях, горизонтальные логотипы здесь работают плохо — используйте иконочную версию или символ бренда.
📐 Совет для горизонтальных логотипов в соцсетях: создайте квадратную версию, добавив пустое пространство (или фоновый цвет бренда) по бокам. Идеальная пропорция — логотип занимает 60–75% ширины квадрата, с равными отступами со всех четырёх сторон. Это предотвращает обрезку кругом и гарантирует, что логотип отображается полностью.
Логотип для печати
Печать имеет совершенно иную логику, чем digital. Важно не разрешение в пикселях — важно соотношение между пикселями и физическим размером печати, измеряемое в DPI (dots per inch, точек на дюйм). Отраслевой стандарт полиграфии — 300 DPI.
Как рассчитать необходимые пиксели для печати
Формула: пиксели = размер в см ÷ 2,54 × DPI
Практические примеры:
| Материал | Типичный размер логотипа | Необходимые пиксели (300 DPI) |
|---|---|---|
| Визитка (логотип) | 3 × 1,5 см | 354 × 177px |
| Фирменный бланк (шапка) | 5 × 2 см | 591 × 236px |
| Маленькая упаковка | 4 × 4 см | 472 × 472px |
| Футболка (грудь) | 10 × 5 см | 1181 × 591px |
| Кружка (логотип сбоку) | 8 × 4 см | 945 × 472px |
| Пакет с логотипом | 15 × 8 см | 1772 × 945px |
| Баннер/роллап (логотип сверху) | 20 × 10 см | 2362 × 1181px |
Чтобы не рассчитывать каждый раз заново, самое практичное решение — использовать SVG: векторный формат масштабируется без ограничений и может быть напечатан в любом размере без потери качества. Любая профессиональная типография принимает SVG (или его эквивалент в векторном PDF, созданный из SVG в Illustrator или Inkscape).
Форматы, принимаемые типографиями
Большинство профессиональных типографий принимают и предпочитают:
- Векторный PDF: отраслевой стандарт. Создаётся в Illustrator, Corel или Inkscape с логотипом в векторе.
- AI (Adobe Illustrator): нативный векторный файл.
- EPS: более старый векторный формат, широко совместимый.
- SVG: принимается большинством современных типографий.
- PNG в высоком разрешении: принимается, когда векторный файл недоступен, при условии, что разрешение достаточно для размера печати.
🖨️ Для вышивки и лазерной резки: эти процессы требуют векторов с чистыми контурами. Логотипы с градиентами, тенями или фотографическими эффектами нужно упростить перед отправкой в производство. Дизайнер может выполнить такую «векторизацию» на основе PNG логотипа, если оригинальный векторный файл отсутствует.
Изменение размера логотипа под каждую задачу
Имея базовый файл логотипа в PNG высокого разрешения (минимум 1000×1000px) или в SVG, используйте Изменение размера изображения ImageTools, чтобы подогнать размеры под каждую платформу. Инструмент позволяет задать точную ширину и высоту в пикселях, сохраняя или изменяя исходную пропорцию.
Рекомендуемый порядок подготовки версий логотипа:
- Всегда начинайте с файла максимального доступного разрешения — SVG или PNG выше 1000px.
- Измените размер под целевые параметры с помощью инструмента изменения размера.
- Для соцсетей слегка сожмите с помощью Компрессора изображений — сохраняя качество 85–90%, чтобы не потерять чёткость.
- Для печати отправляйте SVG напрямую или конвертируйте в векторный PDF.
Измените размер логотипа для любой задачи
Точно настройте размеры логотипа в пикселях — без искажения пропорций.
Изменить размер логотипа бесплатноЧастые ошибки при использовании логотипа в разных размерах
Использовать один и тот же файл для всех случаев
Логотип весом 2000px в подписи email будет загружаться медленно и выглядеть огромным. Логотип 100px при печати на A4 будет пикселизирован. У каждого контекста свои идеальные размеры — используйте это руководство как справочник и меняйте размер перед использованием.
Отсутствие версии для тёмного фона
Многие логотипы изначально создаются в тёмных цветах на светлом фоне. В постах с чёрным или цветным фоном — обычное дело для Instagram Stories и обложек LinkedIn — логотип просто исчезает. Всегда создавайте и сохраняйте версию с основными элементами белого или светлого цвета.
Сохранение для соцсетей в слишком большом PNG
PNG размером 2000×2000px для фото профиля Instagram не улучшает качество отображения — Instagram сжимает всё, что превышает необходимый размер. Загружайте в идеальных размерах (320×320px) с качеством сжатия 90%, чтобы избежать двойного сжатия платформой.
Использовать JPG для логотипов с прозрачным фоном
JPG не поддерживает прозрачность — при сохранении прозрачного PNG-логотипа как JPG прозрачный фон заменяется белым. Если логотипу нужен прозрачный фон (для использования на разных цветах фона), всегда используйте PNG или WebP.
Увеличивать маленький PNG вместо использования SVG
Если логотип существует в SVG, всегда используйте SVG как основу для изменения размера — никогда не увеличивайте маленький PNG. Увеличение PNG создаёт пикселизацию, которую невозможно исправить без оригинального векторного файла.
Ещё нет логотипа? Создайте прямо сейчас
Если у вас ещё нет логотипа или вы хотите создать профессиональную версию, ImageTools предлагает два инструмента для этого: Создать логотип, где вы выбираете иконку, цвета и шрифт с полным контролем, и Логотип с ИИ, где вы описываете свой бренд, а ИИ создаёт готовые векторные варианты для скачивания. Оба экспортируют в SVG и PNG — форматы, которые вам нужны для всех случаев использования, описанных в этом руководстве.
Создайте логотип своего бренда прямо сейчас
Результат в SVG и PNG с прозрачным фоном — готов для сайта, соцсетей и печати.
Частые вопросы
prefers-color-scheme или HTML-тег <picture> с атрибутом media, чтобы автоматически переключаться между светлой и тёмной версией логотипа в зависимости от системных настроек пользователя — без какого-либо взаимодействия со стороны посетителя.