QR-генератор с логотипом онлайн — создать QR-код в PNG и SVG

Нужен QR-код на визитку, в меню или на наклейку с акцией. Ссылка есть, картинки нет. Генератор соберёт код прямо в браузере: вставили текст, выбрали размер и цвета, скачали файл.

На сервер ничего не уходит. Текст, цвета и логотип остаются на вашем устройстве.

Поле ввода уже заполнено примером, поэтому код виден сразу, без единого клика. Сотрите пример, вставьте свою ссылку и следите за превью.

Код статический, и это надо знать до тиража

Ссылка зашита в сам рисунок. Поменять её после печати нельзя. Страница переехала на новый адрес, а тысяча листовок уже разошлась по точкам, значит листовки в мусор.

Статистики сканирований тоже нет. Инструмент считает код в браузере и никуда не обращается, так что переходы фиксировать некому.

Обе проблемы снимает один приём. Заведите на своём домене короткий адрес с редиректом и закодируйте его. Цель редиректа меняете когда угодно, код на бумаге остаётся прежним. Переходы считает тот сервис, где живёт редирект.

Если нужны динамические коды и отчёты из коробки, это к платным сервисам. Здесь их нет.

Кому пригодится

Маркетологу, который готовит печатные материалы: листовки, ценники, упаковку. SMM-специалисту, которому код нужен в посте или в сторис. Владельцу кафе или салона, где QR ведёт в меню, на запись или на отзыв. Задача у всех одна: получить картинку, которая считывается с первого раза.

Три сценария встречаются чаще прочих:

• Визитка. Код ведёт на сайт или на страницу с контактами. Сканируют с расстояния вытянутой руки, поэтому хватает квадрата в два сантиметра. Скачивайте SVG: типография не любит растр.
• Меню в кафе. Код живёт на столе под плёнкой или на тейбл-тенте. Берите три сантиметра и запас по краям, иначе блик и палец гостя съедят угол кода.
• Наклейка с акцией. Витрину читают с двух-трёх метров. Такому коду нужно двадцать сантиметров стороны и очень короткая ссылка.

Как собрать код

Впишите текст или ссылку в верхнее поле. Дальше четыре настройки:

• Размер от 80 до 2000 пикселей, по умолчанию 320.
• Уровень коррекции ошибок: L (7%), M (15%), Q (25%) или H (30%). Изначально стоит M.
• Цвет модулей и фона, два обычных пикера.
• Логотип в центре, необязательно. Загруженную картинку убирают одной кнопкой.

Превью обновляется сразу, а под ним идёт подпись: версия кода, число модулей по стороне и итоговый размер в пикселях, так что вы заранее видите, что именно уедет в макет. Загрузите логотип, и уровень коррекции сам переключится на H. Картинка перекрывает часть модулей, а H восстанавливает их лучше остальных уровней. Инструмент об этом предупредит.

Одна деталь сбивает с толку дизайнеров. Сторона PNG округляется вниз, до целого числа пикселей на модуль. Запросили 320 и короткую ссылку при M, получили 297. Взяли длинную ссылку с метками и коррекцию H, получили 260. Цифра под превью всегда показывает настоящий размер файла. Хотите ровно 320 или 1000 пикселей, поднимите значение и сверьтесь с подписью. В SVG этого эффекта нет: вектор выходит точно того размера, который вы задали.

Логотип: 22% стороны, и это не настраивается

Доля логотипа зафиксирована в коде и равна 22% стороны. Под картинку подкладывается квадрат цвета фона с небольшими полями, вместе они закрывают около 27% стороны. Управлять этим из интерфейса нельзя, так что «сделать логотип чуть меньше» не получится.

Отсюда простые следствия:

• Годится любой файл, который браузер покажет картинкой: PNG, JPEG, SVG, WebP.
• Прозрачный фон сохранять не нужно. Подложка всё равно будет цвета фона кода.
• Берите простой контрастный знак. Мелкий текст и тонкие линии на площади в четверть кода превратятся в кашу.
• Квадратная картинка ложится лучше вытянутой: широкий логотип впишется по длинной стороне и станет мельче.
• После загрузки логотипа уровень коррекции можно вручную вернуть на L или M. Инструмент не возразит, а вот сканеры потом часто отказываются читать такой код. Оставляйте H.

Сколько влезает текста

Кодировщик работает в байтовом режиме и считает текст в UTF-8. Предел зависит от уровня коррекции: 2953 байта при L, 2331 при M, 1663 при Q и 1273 при H. Латиница и цифры занимают байт на символ, а кириллица вдвое больше. То есть русского текста поместится примерно 1470 символов при L и около 630 при H.

Это теоретический потолок, а не рекомендация. Чем длиннее строка, тем плотнее сетка модулей и тем хуже код читается с бумаги. Если текст не помещается вовсе, инструмент прямо скажет об этом и предложит сократить строку или понизить коррекцию.

Отдельных режимов для Wi-Fi, визитки vCard, телефона и SMS здесь нет. Инструмент кодирует ровно то, что вы вписали в поле. Готовую строку такого формата собрать можно и вручную, но конструктора для неё на странице нет.

PNG или SVG

Кнопки скачивания две. PNG — растровая картинка фиксированного размера, она хорошо ложится на сайт, в презентацию и в мессенджер, но при сильном увеличении начнёт рассыпаться на пиксели. SVG — вектор, он печатается без потери качества в любом масштабе, вплоть до баннера. В типографию отдавайте SVG. Для экрана хватит PNG.

Логотип в SVG зашивается внутрь файла картинкой. Файл от этого тяжелеет, а сам знак остаётся растровым, даже если вы загрузили вектор. Для крупной печати с логотипом отдайте дизайнеру и SVG-код, и исходник знака: он подменит картинку на вектор за минуту.

Памятка для печати

Держите под рукой несколько правил, они спасают тиражи:

• Размер считают от расстояния сканирования: сторона кода примерно в десять раз меньше дистанции. Читают с тридцати сантиметров, значит нужно три.
• Меньше двух сантиметров на бумаге не печатайте. Это нижняя граница для телефонов в руках обычных людей.
• Белое поле вокруг кода инструмент добавляет сам, четыре модуля с каждой стороны. Не обрезайте его в макете и не кладите код впритык к тексту или к сгибу.
• Тёмные модули на светлом фоне, а не наоборот. Инверсию сканеры читают через раз, и никакого предупреждения здесь не будет.
• Цвета меняйте осторожно. Контраст проверяйте камерой, а не глазом: жёлтый на белом красив в макете и мёртв на наклейке.
• Проверьте код камерой телефона до того, как макет уйдёт в типографию: полминуты работы здесь стоят целого тиража, который иначе придётся печатать заново.
• Тестируйте на распечатке, а не на экране. Бумага, ламинация и краска ведут себя иначе, чем монитор.

Разметьте ссылку до того, как закодируете

QR почти всегда стоит в офлайне: на листовке, на упаковке, на витрине. В отчётах такие переходы сливаются с прямыми заходами, и бюджет на печать защитить нечем. Добавьте к ссылке UTM-метки перед тем, как делать код. Рядом на сайте есть генератор меток, он соберёт адрес за минуту.

Метки делайте короткими: каждый лишний символ уплотняет сетку модулей. Ссылка на сто с лишним знаков при коррекции H даёт уже 57 модулей по стороне вместо 29 у короткой.

Вставьте ссылку, подберите размер и цвета, скачайте PNG или SVG. На печать берите вектор.