Как сделать логотип сайта: SVG, PNG и вставка в шапку

Логотип сайта должен оставаться узнаваемым в шапке, на узком экране и в монохромном виде, но не обязан содержать сложную иллюстрацию. Начните с короткого названия и простого знака, подготовьте основной SVG и запасной PNG, затем вставьте логотип как ссылку на главную с корректным текстовым описанием. Favicon делается отдельно, потому что маленькая иконка имеет другие ограничения.

Сначала определите задачу логотипа

• Показать название проекта в шапке.
• Дать узнаваемый знак для компактного меню.
• Вести посетителя на главную страницу.
• Работать на светлом и тёмном фоне.
• Оставаться читаемым без мелких деталей и рекламного слогана.

Правило отбора: если знак нельзя уверенно узнать при высоте шапки и в одном цвете, упрощайте форму, а не увеличивайте весь интерфейс.

Карта результата

• Исходное условие: известны название, аудитория и места использования.
• Результат: SVG и PNG с понятными отступами, вариант для тёмного фона и отдельный favicon.
• Обязательные шаги: эскизы, уменьшение, контраст, экспорт, вставка, доступность.
• Проверка: шапка на телефоне, клавиатура, режим без изображения, экран с высокой плотностью.
• Сбои: мелкий текст, лишний фон, растянутые пропорции, дублирование alt и подписи.
• Ограничение: генератор картинки не проверяет права на похожие товарные знаки.

Сделайте три простых эскиза

Первый вариант состоит только из названия, второй из знака, третий объединяет их. Рисуйте сначала одним цветом. Проверьте силуэт на маленьком размере и уберите детали, которые сливаются. Не копируйте узнаваемую форму конкурента и не просите ИИ «сделать как бренд». Для макета всей шапки пригодится план создания макета сайта.

По теме: Как сделать многостраничный сайт: структура и ссылки

Подготовьте SVG и PNG

SVG подходит для простых знаков и текста, потому что масштабируется без потери резкости. MDN описывает SVG как XML-формат для векторной графики и показывает базовую структуру в официальном руководстве. Перед публикацией удалите редакторские метаданные, проверьте viewBox и не встраивайте неизвестные внешние скрипты.

PNG нужен как запасной формат и для мест, где SVG не принимается. Экспортируйте прозрачный фон и реальный размер в несколько раз больше высоты отображения, но не храните огромный холст. Не растягивайте картинку одновременно по ширине и высоте: задайте одну величину, вторую оставьте автоматической.

<a class="brand" href="/" aria-label="На главную">
  <img src="/logo.svg" width="180" height="48" alt="Название проекта">
</a>

Выберите правильный alt

Текст альтернативы зависит от окружения. Если изображение логотипа является единственным содержимым ссылки на главную, W3C рекомендует передать назначение ссылки, например название и слово «главная». Если рядом в той же ссылке уже есть видимое название, картинка может получить пустой alt="", чтобы программа чтения не повторяла текст. Оба случая разобраны в руководстве W3C по функциональным изображениям.

Вставьте логотип без скачка страницы

Задайте атрибуты ширины и высоты, а в CSS ограничьте визуальную высоту шапки. Это резервирует место до загрузки файла. Ссылка должна иметь видимый фокус клавиатуры. На мобильном экране можно скрыть длинную текстовую часть и оставить знак, но доступное имя ссылки должно сохраняться.

1. Сохраните старую шапку или сделайте резервную копию шаблона.
2. Добавьте SVG и PNG под новыми именами, не перезаписывая старые файлы.
3. Вставьте ссылку на главную и задайте ширину с высотой.
4. Настройте максимальную высоту и автоматическую ширину в CSS.
5. Проверьте светлый и тёмный фон, телефон и масштаб 200 процентов.
6. Пройдите к логотипу клавишей Tab и проверьте доступное имя.
7. После приёмки удаляйте старый файл только если он нигде не используется.

По теме: Как сделать шаблон сайта: HTML, CSS и повторные компоненты

Диагностика по симптому

• Логотип размытый: используется маленький растр или браузер растягивает его.
• Картинка обрезана: неверный viewBox или фиксированы обе стороны контейнера.
• После загрузки прыгает шапка: не заданы width и height.
• Программа чтения повторяет название: текст и alt дублируют друг друга в одной ссылке.
• На тёмном фоне знак исчезает: нужен контрастный вариант или управляемый цвет SVG.
• Иконка во вкладке выглядит плохо: нужен отдельный favicon, а не уменьшенная копия широкого логотипа.

Favicon и логотип решают разные задачи. Для вкладки используйте отдельную инструкцию по значку сайта. После вставки пройдите общий чек-лист хорошего сайта, чтобы новый знак не ухудшил скорость, навигацию и мобильную шапку.

Когда способ не подходит

Не публикуйте сгенерированный знак без поиска визуально похожих обозначений, если он станет основой коммерческого бренда. Для регистрации товарного знака и оценки прав нужен профильный специалист. Не встраивайте в SVG шрифты и графику с непонятной лицензией. Если проект временный, безопаснее начать с текстового названия и системного шрифта.

Частые вопросы

Можно ли сделать логотип нейросетью?

Можно получить эскизы, но форму, читаемость, лицензии и сходство с чужими знаками нужно проверять отдельно.

Что лучше, SVG или PNG?

Для простого векторного логотипа основной файл обычно SVG, а PNG служит запасным форматом.

Нужно ли писать название в alt?

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