Как подготовить логотип для сайта, фавикон и файлы для экранов

Логотип для сайта, его SVG-файл и фавикон работают как три роли одного знака: он стоит в шапке, хранится в векторном файле и уменьшается до значка на вкладке браузера. На экране шириной 320 пикселей длинный горизонтальный логотип не помещается. Полный знак с текстом в 16×16 пикселей становится нечитаемым.

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

Какая композиция и размер нужны логотипу для сайта

Логотипу нужны две версии: полная и компактная. Полную (знак и текст) ставят на десктопе, компактную (только иконка или аббревиатура) — на мобильном.

PNG-версию готовят с запасом под экраны Retina и подключают через атрибут srcset или медиа-запрос CSS. Например, если логотип в шапке отображается размером 200×50 пикселей, подготовьте файл 400×100 пикселей.

В одном из конструкторов интернет-магазинов в редакторе тем есть отдельная настройка логотипа. Там загружают файл, добавляют alt-текст и ползунком задают ширину на десктопе. Это условия конкретного сервиса, а не общее правило для всех платформ.

Растянутый или сжатый логотип — признак ошибки. Он появляется, когда в CSS заданы фиксированные ширина и высота, не совпадающие с пропорциями знака. Задайте один параметр, а второй оставьте auto.

Набор версий и экранов задает объем работы, поэтому его удобно зафиксировать до старта, когда вы обсуждаете веб-дизайн под состав экранов вашего сайта.

В каком формате сохранить логотип для сайта

SVG. Главный формат для веба: векторный, открывается в любом браузере, цвета меняются прямо в коде. Файл SVG обычно весит от 2 до 15 килобайт. Минус: логотип с фотографическими текстурами или многослойными тенями лучше экспортировать в PNG.

PNG. Подходит, когда нужен прозрачный фон. PNG с прозрачным фоном — большой (1000+ px), иначе при растяжке он потеряет резкость. Если SVG не подходит, запасной вариант — WebP: он тоже поддерживает прозрачность и весит меньше PNG при сопоставимом качестве.

JPG. Для логотипа не подходит.

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

По мнению автора одного из разборов, минимальный комплект логотипа: SVG как основная версия для всего цифрового и PNG с прозрачным фоном от 1000 пикселей, при желании с готовыми уменьшенными версиями. Это рекомендация автора, а не стандарт. Для корпоративных страниц логотип часто используют и как OG-изображение размером 1200×630 пикселей.

Как логотип для сайта сохраняет стиль в фавиконе и дизайне

Фавикон (favicon) — небольшая иконка рядом с названием страницы во вкладке, в закладках и истории браузера. Готовый логотип можно адаптировать под него, если знак остается читаемым в 16×16 пикселей и не теряет фирменный стиль. Берите только иконическую часть: символ, первую букву или графический элемент.

• 16×16 — стандарт для вкладок;
• 32×32 — для Retina-дисплеев;
• 48×48 и выше — для мобильных иконок и ярлыков.

Форматы: .ico, .png и .svg. Рекомендуют подготовить фавикон в нескольких форматах.

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

Тот же прием работает для шапки. Если логотип отображается размером 200×50 пикселей, для Retina готовят файл 400×100 пикселей и подключают его через srcset или медиа-запрос CSS.

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

Логотип для сайта проверяют по композиции, формату и стилю

Перед утверждением знака пройдите по списку:

• Есть две версии: полная для десктопа и компактная для мобильного.
• Основной файл сохранен в SVG, есть PNG с прозрачным фоном от 1000 px, а JPG не используется.
• В CSS задан только один размер, второй оставлен auto.
• Фавикон различим в 16×16 пикселей и контрастен на светлом и темном фоне.
• Шрифты и цвета подходят роду деятельности и совпадают со стилем сайта.

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