Логотип онлайн: знак, надпись, иконки

Потому что логотип отказывает именно там. На экране его собирают крупным, а работает он маленьким: 16 пикселей во вкладке браузера, иконка на телефоне, кружок аватара, оттиск на коробке. Знак с тонкими линиями и подписью из пяти слов в этих размерах превращается в серое пятно, и узнать об этом лучше сейчас, чем после печати тиража. В том же ряду стоят версия в одну краску и симуляция дальтонизма: контраст бывает приличным, а красное на зелёном для каждого двенадцатого мужчины всё равно сливается.

Да, и это главный ответ на вопрос «у меня уже есть знак». Файл SVG разбирается на контуры и становится знаком наравне с нашими: если он одноцветный, то перекрашивается вместе с логотипом, а разноцветный сохраняет свои цвета. Обычную картинку — PNG, JPG, WebP, скан от руки — конструктор обводит по контуру и превращает в вектор: дальше она масштабируется без потерь, красится в цвет палитры и уезжает в SVG кривыми, а не точками. Подробность обводки настраивается ползунком, а если на картинке светлый рисунок на тёмном фоне, помогает кнопка «Инвертировать». Когда обвести не получается — например, это фотография, — она вставляется как есть, и об этом прямо сказано под предпросмотром: иначе обещание «настоящий вектор» было бы неправдой.

Тем, что он действительно векторный и самодостаточный. Частая подмена — картинка PNG, завёрнутая в SVG-файл: он открывается, но при увеличении расплывается. Вторая — надпись тегом text: на вашем компьютере она выглядит правильно, а у типографии или у дизайнера подставляется системный шрифт, и логотип молча меняет начертание. Здесь буквы переведены в кривые, поэтому файл ни от чего не зависит и правится в любом векторном редакторе. Стоит знать и то, что во многих известных конструкторах вектора нет вовсе: Adobe Express не выгружает SVG ни на одном тарифе, а Squarespace и конструктор Shopify отдают только PNG.

Это три разных способа отказать, и каждый ловится своим числом. «Контраст» — отношение яркостей знака и фона по формуле WCAG: чем больше, тем увереннее логотип виден; ниже трёх подпись загорается предупреждением, потому что светло-серый знак на белом красиво выглядит на макете и исчезает на визитке. «Дальтонизм» — тот же контраст, но посчитанный после симуляции самого частого нарушения цветовосприятия: красное на зелёном может дать приличное первое число и слиться во втором. «В 16 px» предупреждает, что подпись в этом размере читаться не будет, — её место на большой версии, а не в фавиконе.

Favicon 16, 32 и 48 пикселей для вкладки браузера, собранный из них favicon.ico для старых браузеров и закладок Windows, apple-touch-icon 180 для экрана iPhone, иконки 192 и 512 для манифеста, маскируемая иконка 512 с запасом по краям (её система сама обрезает под форму значка на Android), favicon.svg, готовый site.webmanifest и файл head.html со строками подключения. Файлы кладут в корень сайта, а строки из head.html вставляют в раздел head страницы. Прозрачность у apple-touch-icon и у маскируемой иконки намеренно убрана: iOS кладёт прозрачный значок на чёрное, и углы получаются чёрными.

Знаки нарисованы для этого инструмента, а не взяты из общедоступного иконочного набора. Разница не только в похожести. У конструктора Squarespace значки берутся из чужой библиотеки, и в его собственной справке написано, что перед публикацией логотипа нужно прочитать лицензию конкретной иконки; у Adobe Express часть встроенных элементов идёт по лицензии, прямо запрещающей выгружать их отдельным файлом, — а логотип это ровно отдельный файл. С нашими знаками такого абзаца нет. Формы здесь намеренно простые и геометрические: такие читаются в 16 пикселях, чего не умеет ни одна подробная иконка. Если своего знака хочется сильнее — загрузите рисунок или возьмите монограмму из инициалов.

Да. Если в выбранном декоративном шрифте нужных букв нет — например, в Bebas Neue нет ни кириллицы, ни хангыля, — надпись набирается шрифтом, который их содержит, и под предпросмотром прямо сказано, каким именно. Молча подставить другой шрифт было бы хуже: вы бы увидели не свой логотип и не узнали об этом. Арабская вязь собирается с правильным направлением и соединением букв.