Як зробити QR-код із логотипом компанії — і чи це безпечно для сканування

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

А тепер додай у центр логотип. Раптом людина бачить, чий це код, ще до того, як піднесе телефон. І сканує охочіше, бо бачить бренд, який знає. Різниця в зчитуваннях може бути значною.

Питання, яке завжди виникає на цьому етапі: «а чи не зіпсує це мені сканування?». Ні. За умови, що ви не зробите цього навмання.

Чому логотип не підриває весь QR-код із логотипом у повітря

Тут є невелика магія, яку варто розуміти. Кожен QR-код має в собі закладену корекцію помилок. Це такий надлишковий багаж даних, який дозволяє зчитувачу відтворити ціле, навіть якщо частина коду забруднена, пом'ята або чимось закрита.

На найвищому рівні (позначається літерою «H») код переживе перекриття приблизно 30% поверхні. Логотип посередині зазвичай з'їдає 20–25%. Тобто ви вписуєтеся, і навіть із запасом.

Дві речі, яких я завжди дотримуюсь:

1. Логотип іде в самий центр. Ніколи в кути. Ці три товсті квадрати в кутах — це маркери позиції, за ними зчитувач розуміє, де верх, а де низ. Закриєш один — і все, код не працює.
2. Додай логотипу білу обводку. Тонкий відступ навколо. Це відокремлює твою графіку від «пікселів» коду і справді допомагає при зчитуванні, особливо якщо логотип має рвану, нерівну форму.

Робота крок за кроком

У cutty.dev ви робите це заодно зі скороченням посилання, бо QR-код додається до кожного посилання автоматично. Поїхали:

1. Скоротіть посилання або відкрийте те, яке вже маєте в панелі.
2. Перейдіть у секцію „Kod QR" на сторінці редагування.
3. Завантажте своє лого (PNG, SVG, JPG, що у вас є). Воно розміщується по центру, а корекція помилок автоматично піднімається на вищий рівень. Вам не потрібно нічого натискати.
4. Підберіть колір коду та фону під бренд.
5. Завантажте. PNG — для екрана та соцмереж, SVG — для друку (масштабується без втрати чіткості, тому для банера чи ролапу обирайте саме SVG).

Попередній перегляд оновлюється в реальному часі. Ви бачите результат ще до того, як щось буде збережено на диск.

Будь обережним: кольори можуть тебе підвести

Це той самий момент, у якому люди найчастіше помиляються, тому слухай уважно.

Сканер не читає кольори. Читає контраст. Можеш код розфарбувати, будь ласка, але дотримуйся правила: темний код на світлому фоні. Не навпаки. Світлий код на темному фоні — так, він відсканується на твоєму флагманському телефоні, а потім клієнт зі старішим андроїдом стоятиме і лаятиметься, бо нічого не ловить.

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

Справа, про яку тобі ніхто не скаже: де опиняється твій логотип

Більшість генераторів кодів з логотипом просять вас завантажити файл на їхній сервер. І тут зупиніться на секунду. Ваш фірмовий знак, іноді єдина належна векторна версія, опиняється у чужого постачальника. А в правилах може бути прописане право на подальше використання цього файлу. Хтось коли-небудь читав ці правила? Ось саме.

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

Друкуєте один раз, спрямовуєте куди завгодно

Наостанок порада, яка колись врятує вам чимало грошей на повторному друку.

Роби код із скороченого посилання, а не з сирої, довгої адреси. Чому? Бо код, заснований на короткому посиланні, ти можеш потім замінити зсередини. Змінюєш ціль посилання в панелі, і той самий надрукований код раптом веде в інше місце. Закрилася акція? Перенаправляєш на нову, не чіпаючи флаєри.

Код, вшитий прямо у довгу адресу, є зацементованим. Зміна мети = новий код = новий друк = новий рахунок від друкарні. Подумайте про це, перш ніж замовляти тисячу візиток.