logo
QR Codes•

Adicione logo, cores e moldura ao QR Code

Coloque o logo do workspace no meio do QR Code, defina as cores, escolha um padrão e adicione uma moldura com texto sem quebrar a leitura.

Avatar for undefined
CodeQR Team
Equipe de Conteúdo

Ao final deste guia o seu QR Code leva o seu logo no meio, as cores da marca, o padrão de módulos que você preferir e uma moldura com chamada para ação — e continua lendo da distância que você precisa.

Disponibilidade

  • Plano: cores, tamanho e o padrão e a forma básicos em todos os planos. Remover Logo, molduras, a forma Círculo e os padrões Triângulos, Estrelas e Corações precisam de plano pago; no Free o código sempre mostra a marca da CodeQR e não tem moldura.
  • Onde: a seção Design do editor de QR Code (Criar QR Code ou menu do card ⋮ → Editar). Os campos de design também são aceitos pela API (fgColor, bgColor, size, pattern, shape, frame, frameText, frameColor, frameTextColor, frameTextStyles, showLogo).

Antes de começar

  • O logo exibido no meio de todo QR Code é o logo do workspace. Envie-o uma vez em Configurações → Geral; não há upload por código. Workspaces sem logo mostram a marca da CodeQR até você enviar um logo ou colocar Remover Logo em Sim.
  • O logo cobre cerca de 15 % do lado do código e os módulos sob ele são removidos; o editor eleva a correção de erro ao nível máximo para compensar. Mantenha o logo simples e com contraste — um logo carregado esconde dados que o código precisa.
  • Cores: mantenha módulos escuros sobre fundo claro. Módulos claros sobre fundo escuro são lidos de forma inconsistente pelas câmeras, e contraste baixo é o motivo mais comum de um código impresso falhar.

Passos

  1. Abra QR Codes e clique em Criar QR Code, ou abra o menu do card (⋮) → Editar num código existente.
  2. Role até Design. Em Logo, deixe Remover Logo em Não para manter o logo do workspace, ou coloque em Sim para exportar um código sem logo (planos pagos).
  3. Defina Cor do Primeiro Plano (os módulos) e Cor do Fundo em hexadecimal, por exemplo #1e3a8a sobre #ffffff. Marque Transparente no fundo só quando o código for ficar sobre uma superfície clara — a superfície passa a ser o fundo.
  4. Escolha um Tamanho. 1024px (Padrão) cobre telas e impressos pequenos; suba para formatos grandes (veja Baixe e imprima o QR Code no tamanho certo).
  5. Escolha uma forma — Nenhum, Quadrado ou Círculo — para desenhar um contorno em volta do código na cor do primeiro plano.
  6. Escolha um padrão para os módulos: Quadrados, Círculos, Losangos (todos os planos) ou Triângulos, Estrelas, Corações (planos pagos). Os três quadrados localizadores dos cantos sempre mantêm a forma padrão.
  7. Em Modelo de moldura, escolha uma das cinco molduras para adicionar uma faixa com texto abaixo ou acima do código, ou mantenha ✕ para nenhuma. Com uma moldura selecionada, preencha Texto da Moldura (até 200 caracteres, por exemplo ESCANEIE PARA O CARDÁPIO), Cor da Moldura, Cor do texto da moldura e, em Tipografia, Família da fonte e o estilo do texto (tamanho e negrito ou itálico).

Design section with foreground color #1e3a8a, size 1024px, shape Square, pattern Circles, frame template selected, Frame Text SCAN FOR MENU and the Typography controls

  1. Acompanhe a Visualização do código QR à direita enquanto muda as opções e clique em Create QR Code ou Save QR Code (o botão do painel de visualização aparece em inglês).
  2. Clique em Exportar na visualização para baixar o código com o design (SVG para impressão).

Mudanças de design nunca alteram o que o código codifica: um código dinâmico impresso continua funcionando depois de restilizado, e o novo visual vale para a próxima exportação.

O mesmo pela API

Envie os campos de design em POST /qrcodes ou PUT /qrcodes/{qrcodeId}. Os valores são validados: size entre 128 e 5000, frameText até 200 caracteres, cores em hexadecimal (valores inválidos caem em preto e branco).

Requisição:

curl -X PUT https://api.codeqr.io/qrcodes/cmsx875y30001je433cy0ltlh \
  -H "Authorization: Bearer codeqr_xxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "fgColor": "#1e3a8a",
    "pattern": "circles",
    "frame": "frame-1",
    "frameText": "SCAN FOR MENU",
    "size": 2000
  }'

Resposta (200 OK, resumida):

{
  "id": "cmsx875y30001je433cy0ltlh",
  "key": "iVx0OCFyDn79-qr",
  "size": 2000,
  "fgColor": "#1e3a8a",
  "bgColor": "#ffffff",
  "pattern": "circles",
  "shape": "none",
  "frame": "frame-1",
  "frameText": "SCAN FOR MENU",
  "showLogo": true,
  "shortLink": "https://qrup.link/iVx0OCFyDn79-qr"
}

Valores aceitos: pattern = default, circles, diamond, triangle, stars, hearts; shape = none, square, circle; frame = none, frame-1, frame-2, frame-3, frame-5, frame-6; frameTextStyles = { "family": "sans" | "sans-condensed" | "serif" | "serif-elegant" | "mono", "size": "s" | "m" | "l" | "xl", "weight": "normal" | "bold", "style": "normal" | "italic" }. showLogo: false esconde o logo (planos pagos). Códigos criados pela API ficam com correção de erro M a menos que você envie "level": "H" — faça isso sempre que o código levar logo. A tool create_qrcode do MCP aceita só fgColor, bgColor, size e level.

Como verificar

  1. Exporte o código e escaneie o arquivo na tela com um celular; depois imprima uma prova e escaneie de novo da distância pretendida.
  2. Teste pelo menos um iPhone e um Android. Se um código colorido lê num e não no outro, aumente o contraste ou volte ao preto sobre branco.
  3. Confirme a leitura em QR Codes (contador do card) ou em Análise → aba QR Codes.

Solução de problemas

O código mostra a marca da CodeQR em vez do meu logo

Envie o logo do workspace em Configurações → Geral e exporte de novo. No plano Free a marca é fixa ("Personalizar o logo do QR Code está disponível em qualquer plano pago.").

Remover Logo, molduras ou alguns padrões estão travados

Precisam de plano pago. O ícone de cadeado em Círculo, Triângulos, Estrelas e Corações marca as opções pagas; num workspace pago elas são selecionáveis mesmo com o ícone.

O código parou de ler depois que adicionei logo ou mudei as cores

Muita área coberta ou contraste baixo. Volte a Cor do Primeiro Plano para um valor escuro sobre fundo claro, mantenha o logo pequeno e evite fundo transparente sobre superfícies escuras. Detalhes em Resolva um QR Code que não lê ou abre a página errada.

O texto da moldura foi cortado

O Texto da Moldura é limitado a 200 caracteres e quebra em no máximo quatro linhas, reduzindo a fonte conforme preciso. Encurte o texto ou use uma chamada mais curta, como ESCANEIE-ME.

A API responde "Invalid size."

size precisa estar entre 128 e 5000. Use um dos valores do editor (256, 512, 1024, 1500, 2000, 3000, 4000, 5000) para bater com o app.

Artigos relacionados