Как сделать логотип для сайта: размеры, форматы и установка
Разделы
- Все
- Блог 6
- Начало работы 9
- Интернет магазин 18
- Домены 14
- Заявки и заказы 5
- Продвижение сайтов 18
- Интеграции 27
- Повышение конверсии 3
- Тарифы и оплата 4
- Редактор конструктора 61
- Технические вопросы и частые ошибки 82
- Сервисы, приложения и технологии 2331
- Создание сайтов 709
- Копирайтинг 307
- Маркетинг и реклама 2049
- Продвижение и аналитика 520
- Социальные сети и мессенджеры 257
- Маркетплейсы и онлайн-продажи 258
- Нейросети и автоматизация 247
- Текстовые редакторы 344
- Бизнес, управление и обучение 2001
- Дизайн, фото и визуальный контент 713
- Образование и карьера 322
- Заработок и финансы 791
- Общество и культура 198
- Продажи и клиенты 645
- Здоровье и тело 1091
Логотип на сайте должен оставаться чётким в шапке, на смартфоне и на экране с высокой плотностью пикселей. Для этого недостаточно просто сохранить красивую картинку: важно выбрать подходящий формат, подготовить прозрачный фон и не загружать слишком тяжёлый файл.
Наша подборка готовых шаблонов сайтов — идеальное решение, если вы хотите сайт без помощи дизайнера.
Какой формат логотипа выбрать для сайта
Для веб-сайта чаще всего используют SVG и PNG. JPG подходит хуже: он не поддерживает прозрачность и может создавать заметный прямоугольный фон вокруг знака.
| Формат | Когда использовать | Преимущество |
|---|---|---|
| SVG | Основной логотип в шапке и подвале | Не теряет чёткость при масштабировании, обычно мало весит |
| PNG | Когда SVG не поддерживается или нужен растровый файл | Поддерживает прозрачный фон |
| JPG | Только если логотип является частью фотографии или сплошного фона | Небольшой вес, но нет прозрачности |
Какие размеры подготовить
Универсального размера нет: он зависит от высоты шапки и композиции логотипа. Лучше хранить исходник крупнее фактического отображения.
- Горизонтальный логотип: исходник шириной 800–1200 px; на сайте обычно отображается шириной 140–260 px.
- Квадратный знак: 512×512 px — удобный исходник для аватара и мобильной версии.
- Favicon: минимум 32×32 px; дополнительно полезно подготовить 180×180 px для мобильных устройств.
- SVG: фиксированный большой размер не нужен — файл масштабируется без потери качества.
Как сделать логотип для сайта: пошагово
- Определите задачу. Решите, будет ли это только надпись, знак или комбинация знака и названия.
- Проверьте читаемость. Название должно распознаваться и в крупном виде, и при ширине около 150 px.
- Ограничьте палитру. Обычно достаточно одного основного и одного дополнительного цвета.
- Подготовьте прозрачный фон. Это позволит поставить логотип на светлую, тёмную или цветную подложку.
- Экспортируйте SVG и PNG. SVG используйте как основной файл, PNG оставьте как резервный.
- Проверьте на разных экранах. Откройте сайт на компьютере и смартфоне и убедитесь, что знак не обрезается.
Если концепция ещё не определена, сначала подготовьте требования с помощью брифа на создание логотипа. Практические принципы выбора формы, шрифта и цвета разобраны также в материале «Как разработать логотип».
Как установить логотип в TOBIZ
- Откройте нужный проект в редакторе TOBIZ.
- Перейдите к блоку шапки сайта.
- Выберите элемент с логотипом и загрузите подготовленный SVG или PNG.
- Настройте ширину и отступы так, чтобы логотип не конкурировал с меню и кнопкой.
- Проверьте мобильную версию и сохраните страницу.
Если в шапке используется тёмный фон, подготовьте светлую версию логотипа. Для светлого фона — основную цветную или тёмную версию. Не стоит размещать белый логотип на белом фоне или добавлять под него случайную рамку.
Чек-лист перед публикацией
- логотип читается при небольшой ширине;
- фон действительно прозрачный;
- файл не содержит лишних полей;
- цвета совпадают с фирменной палитрой сайта;
- в шапке нет размытия или растяжения;
- подготовлен отдельный компактный знак для favicon и мобильных экранов;
- изображение имеет понятное имя файла и alt-текст.
Частые вопросы
Что лучше для сайта — SVG или PNG?
Если редактор поддерживает SVG, выбирайте его: такой логотип остаётся чётким при любом масштабе. PNG нужен как запасной вариант и для сервисов, которые не принимают SVG.
Можно ли использовать логотип с белым фоном?
Можно, если он всегда размещается на такой же белой подложке. Но практичнее иметь версию с прозрачным фоном — она подходит для большего числа блоков.
Как быстро получить готовые файлы?
Бесплатный конструктор логотипов позволяет создать вариант и скачать его в SVG и PNG, после чего файлы можно сразу загрузить на сайт.
Наш конструктор интернет магазина включает в себя все для онлайн-торговли.