Как сделать QR-код с логотипом компании — и безопасно ли это для сканирования

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

А теперь помести логотип в центр. Внезапно человек видит, чей это код, еще до того, как поднесет телефон. И сканирует охотнее, потому что видит знакомый бренд. Разница в количестве сканирований может быть значительной.

Вопрос, который всегда задают на этом этапе: «а не испортит ли это мне сканирование?». Нет. При условии, что вы не будете делать это наобум.

Почему логотип не взрывает весь QR-код с логотипом в воздух

Здесь кроется небольшая магия, которую стоит понять. Каждый QR-код содержит в себе встроенную коррекцию ошибок. Это своего рода избыточный багаж данных, который позволяет сканеру восстановить всё изображение, даже если часть кода загрязнена, помята или чем-то закрыта.

На самом высоком уровне (обозначаемом буквой «H») код переживет перекрытие примерно 30% поверхности. Логотип в центре обычно съедает 20–25%. То есть вы укладываетесь, причем с запасом.

Две вещи, которых я всегда придерживаюсь:

1. Логотип идет ровно в центр. Никогда не в углы. Эти три жирных квадрата по углам — это маркеры позиции, по ним ридер понимает, где верх, а где низ. Закроете один — и всё, код нечитаем.
2. Добавьте логотипу белую обводку. Тонкий отступ вокруг. Это отделяет вашу графику от «пикселей» кода и действительно помогает при считывании, особенно если у логотипа рваная, неровная форма.

Работа шаг за шагом

В cutty.dev вы делаете это попутно при сокращении ссылки, так как QR-код автоматически добавляется к каждой ссылке. Поехали:

1. Сократите ссылку или откройте ту, которая уже есть в панели.
2. Перейдите в раздел «QR-код» на странице редактирования.
3. Загрузите свой логотип (PNG, SVG, JPG — что у вас есть). Он разместится по центру, а уровень коррекции ошибок автоматически повысится. Вам не нужно ничего нажимать.
4. Подберите цвет кода и фона под ваш бренд.
5. Скачайте. PNG — для экрана и соцсетей, SVG — для печати (масштабируется без потери четкости, поэтому для баннеров или ролл-апов выбирайте именно SVG).

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

Будьте осторожны: цвета могут вас подвести

Это тот самый момент, в котором люди чаще всего совершают ошибку, поэтому слушай внимательно.

Сканер не читает цвета. Он читает контраст. Вы можете раскрасить код, пожалуйста, но соблюдайте правило: темный код на светлом фоне. Не наоборот. Светлый код на темном фоне — да, он отсканируется на вашем флагманском телефоне, а потом клиент со старым Android будет стоять и ругаться, потому что ничего не ловит.

И не располагайте цвет кода слишком близко к цвету фона. Темно-синий на черном? Забудьте. Чем выше контраст, тем увереннее код считывается с большего расстояния (а на сайте магазина или плакате на остановке это как раз имеет значение).

Дело, о котором вам никто не скажет: куда попадает ваш логотип

Большинство генераторов QR-кодов с логотипом просят вас загрузить файл на их сервер. И здесь стоит остановиться на секунду. Ваш фирменный знак, иногда единственная приличная векторная версия, попадает к стороннему поставщику. А в пользовательском соглашении может быть прописано право на дальнейшее использование этого файла. Кто-нибудь когда-нибудь читал это соглашение? Вот именно.

У нас код создается в вашем браузере. Логотип не покидает ваш компьютер, никуда не отправляется и не сохраняется. Файл остается вашим.

Печатаете один раз, направляете куда угодно

Напоследок совет, который когда-нибудь сэкономит вам немало денег на повторной печати.

Создавайте код из короткой ссылки, а не из исходного длинного адреса. Почему? Потому что код, основанный на короткой ссылке, вы сможете позже изменить изнутри. Вы меняете цель ссылки в панели управления, и тот же самый напечатанный код внезапно ведет в другое место. Акция закончилась? Перенаправляйте на новую, не меняя флаеры.

Код, вшитый прямо в длинный адрес, зацементирован. Изменение цели = новый код = новая печать = новый счет из типографии. Подумайте об этом, прежде чем заказывать тысячу визиток.