Логотип для сайта и мобильных экранов: варианты и приёмка
Как подготовить логотип для шапки, favicon и тёмной темы: компактный знак, SVG, охранное поле, доступное название и проверка в браузере.
Главное за 30 секунд
Логотип для сайта принимают в реальном интерфейсе. Проверьте широкую шапку, узкий экран, вкладку браузера, светлый и тёмный фон. Для этих мест часто нужны разные утверждённые варианты одного знака. Готовый комплект включает понятные файлы, условия выбора версии и результаты проверки при небольшом размере. Векторный формат сохраняет геометрию, однако читаемость мелких деталей всё равно зависит от самого рисунка.
Начните с мест, где человек увидит знак
Составьте список поверхностей: шапка главной страницы, закреплённая панель после прокрутки, открытое меню телефона, подвал, страница оплаты, письмо с подтверждением и вкладка браузера. У каждого места свои пропорции и фон. Подпишите доступную ширину и высоту, соседние элементы и действие по нажатию. Такой список помогает дизайнеру подготовить нужные версии заранее. Большая картинка на презентационном слайде показывает лишь одну ситуацию.
Если название длинное, измерьте его рядом с переключателем языка и кнопкой связи. На маленьком экране шапка должна сохранять место для действий пользователя. Решение может включать горизонтальную композицию для широкого экрана и отдельный знак для узкой панели. Смена версии должна происходить по согласованному правилу ширины или доступного места. Про общий состав айдентики можно прочитать в разборе фирменного стиля. Здесь задача уже: проверить конкретные цифровые применения.
Как устроить комплект вариантов
Разделите файлы по назначению. Полная композиция содержит знак и название, компактная сохраняет узнаваемый элемент, одноцветная подходит для ограниченной палитры. Если у логотипа есть слоган, подготовьте версию, где он отсутствует: подпись обычно становится слишком мелкой в шапке. При этом изменения выполняет дизайнер на основе утверждённой формы. Самовольное удаление деталей разработчиком создаёт новый рисунок, который никто не согласовывал.
У каждой версии нужны охранное поле и минимальный проверенный размер. Укажите, относится ли размер к ширине всей композиции, высоте знака или букв. Иначе одна команда считает двадцать пикселей высотой рисунка, другая включает в эти двадцать прозрачные отступы. Полезно приложить один экран со всеми вариантами в натуральном размере. Содержание общего документа есть в материале о файлах брендбука; комплект для сайта можно принять отдельно, с собственными техническими условиями.
Малый размер требует отдельной проверки рисунка
Поставьте знак на рабочий экран в нескольких небольших размерах и смотрите при обычном масштабе браузера. В первую очередь оцените просветы внутри букв, тонкие линии, близкие контуры и маленькие декоративные элементы. Если два штриха сливаются, увеличение качества экспорта проблему геометрии сохраняет. Дизайнер может предложить упрощённую малую версию с увеличенными просветами, меньшим количеством деталей или другой толщиной линии. Эти изменения фиксируют как утверждённый вариант.
Проверяйте на светлом и тёмном фоне, рядом с реальным меню и на экране телефона. При увеличении макета до четырёхсот процентов знак кажется яснее, чем в повседневном использовании. Снимок экрана в натуральном размере позволяет сравнить версии честнее. Минимальный размер устанавливайте после проверки вашего изображения. Универсальное число для любых логотипов дать нельзя: тонкий словесный знак и простая геометрическая форма ведут себя по-разному.
Что проверить в SVG до передачи разработчику
SVG удобен для масштабирования логотипа, поскольку описывает векторные формы. Проверьте границы изображения, пропорции, заливки и наличие viewBox. Документация MDN объясняет, что viewBox задаёт область координат, которая отображается в контейнере. Если эта область включает огромные пустые поля, видимый знак окажется маленьким даже при правильной ширине элемента. Откройте файл отдельно и внутри шапки: оба состояния должны показывать одинаковую композицию.
В финальном веб-файле уберите ненужные редакторские данные и проверьте внешние зависимости. Если название хранится как текст и рассчитывает на шрифт с компьютера дизайнера, на другом устройстве оно может выглядеть иначе. Для законченного логотипа обычно передают буквы в контурах и сохраняют редактируемый исходник отдельно. Разработчик дополнительно проверяет файл на неожиданные скрипты и внешние ссылки. Это обычная проверка входного ресурса перед публикацией, особенно когда файл получен через несколько подрядчиков.
Favicon должен работать как самостоятельный знак
Во вкладке браузера места мало. Полное название компании часто превращается в нечитаемую полосу. Выберите элемент, который остаётся различимым в квадратной области: знак, монограмму или специально подготовленную часть утверждённого логотипа. Проверьте соседство с иконками других сайтов. Если рисунок занимает только верхний угол большого прозрачного квадрата, он будет казаться меньше соседних фавиконов. Композицию нужно выровнять визуально, сохраняя согласованные пропорции.
В MDN атрибут rel описывает связь документа с иконкой; браузер выбирает ресурс с учётом формата и объявленных размеров. Подготовьте комплект под согласованный список браузеров, а установку иконки сайта на домашний экран телефона рассматривайте отдельно. После обновления проверьте новую вкладку и чистый профиль: браузер может хранить прежнюю иконку в кэше. В приёмке полезнее конкретный список проверенных сред и снимки, чем обещание одинакового поведения любого устройства.
Светлая и тёмная темы: цвет и доступность
Подготовьте версии для белого, тёмного и фирменного фона. Светлый контур на белом фоне может исчезнуть, а цветная деталь на тёмном стать слишком тусклой. Укажите точные условия применения каждой версии. Возможность учитывать системную тему описана в MDN через prefers-color-scheme. Однако сайт может иметь собственный переключатель темы, поэтому разработчик должен связать выбор логотипа с фактическим состоянием интерфейса. Проверьте и первый момент загрузки, когда тема ещё определяется.
W3C отдельно описывает контраст значимых графических объектов и элементов интерфейса. У логотипов есть особенности и исключения в критериях контраста, поэтому превращать один коэффициент в универсальный тест фирменного знака неверно. Практическая цель остаётся понятной: человек различает бренд и понимает действие ссылки. Кликабельный логотип должен иметь доступное название, например название компании и переход на главную. Для декоративной копии рядом с тем же текстом разработчик выбирает способ избежать повторного озвучивания.
Условный пример: длинное название в мобильной шапке
Представим условную мастерскую «Городские мастерские». Это учебный пример, сведения о клиенте TIPA здесь отсутствуют. В широкой шапке помещаются знак, название, меню и телефон. На мобильном экране полная композиция занимает почти всю строку, а кнопка меню съезжает вниз. Команда проверяет два варианта: перенос названия на две строки и компактный знак с доступным названием ссылки. Сравнивают высоту панели, понятность перехода на главную и пространство для телефона.
Для favicon мастерская использует утверждённую геометрическую деталь. В маленьком размере внутренний просвет закрывается, поэтому дизайнер делает отдельную малую версию и показывает её рядом с исходной. При тёмной теме выбирают светлый одноцветный файл. Итогом становится таблица применения, четыре нужных ресурса и экран проверки. Вопрос полного обновления айдентики рассматривают отдельно по признакам из статьи о необходимости ребрендинга. Такая проверка позволяет решить локальную задачу шапки, сохранив понятный объём работы.
Разведите размер рисунка и область нажатия
Небольшой знак в шапке может находиться внутри более просторной ссылки. Разработчик задаёт область нажатия отдельно от видимых контуров и проверяет соседство с кнопкой меню. На телефоне посетитель должен уверенно попасть в нужное действие. При этом прозрачные поля внутри самого файла затрудняют расчёт: макет показывает один размер контейнера, а видимый рисунок занимает другую площадь. Лучше передать аккуратный файл и описать внешние отступы в правилах интерфейса.
Проверяйте также закреплённую шапку после прокрутки: в ней иногда используется другая высота панели и другой вариант знака. Если в меню открывается светлая подложка поверх тёмного первого экрана, логотип должен переключаться согласованно с подложкой. Сделайте снимки до прокрутки, после прокрутки и с открытым меню. Проверьте, что изменение варианта не сдвигает соседние кнопки. Такой набор воспроизводит повседневные действия посетителя и помогает найти проблему до публикации. Проверьте загрузку страницы при заблокированном изображении. У ссылки должно сохраняться понятное название. Если логотип повторяется в подвале, убедитесь, что каждая ссылка ведёт в согласованное место и работает после переключения языка. На внутренних страницах отдельно проверьте адрес главной: русская шапка обычно должна вести на русскую главную. В журнал приёмки запишите реальные адреса страниц, размеры окна и выбранную тему. Это позволит воспроизвести замечание после обновления сайта и отличить проблему ресурса от проблемы размещения.
Приёмка и передача: что должно лежать в папке
Передайте разработчику файлы с ясными именами, например logo-horizontal-light.svg и logo-symbol-dark.svg, исходники, список разрешённых фонов и минимальные проверенные размеры. Укажите версию комплекта и дату согласования. В папке должно быть очевидно, какие ресурсы актуальны. Архивы предыдущих концепций храните отдельно. Если одна версия обновилась после комментария руководителя, попросите автора отметить все затронутые файлы, включая favicon и изображения для писем.
Приёмка включает открытие сайта на широком и узком экране, смену темы, проверку увеличения, переход на главную с клавиатуры и загрузку иконки. Сверьте результат со списком проверки брендинга перед запуском. Общие правила повторяющихся элементов описаны в материале о дизайн-системе бренда. Для локального комплекта зафиксируйте найденные замечания, ответственного и повторную проверку после исправлений. Обсудить подготовку вариантов можно на странице брендинга в Ташкенте, приложив текущий знак и снимки проблемных экранов.
Первичные источники и документация
Следующий шаг
Если хотите применить схему к своему проекту, передайте логотип и список цифровых носителей. Сначала зафиксируем исходные данные и критерии готовности, затем оценим объём работ.
Посчитайте стоимость под вашу задачу
Ориентир. Зависит от глубины проработки и числа носителей.
Бесплатная диагностика за 24–48 часов: посмотрим ситуацию, скажем что даст результат, дадим смету.
