Ir al contenido

Código QR con logo

Añade tu logo a un código QR sin pagar, sin registrarte y sin marca de agua. Hay dos maneras de hacerlo y se comportan de forma muy distinta. Esta página explica qué cuesta cada una y hasta dónde puedes llegar antes de que el código deje de escanearse.

En esta página

La mayoría de generadores ofrece uno. FigQR ofrece los dos, y la diferencia no es estética.

  • En el centro. La versión conocida. Se despeja un cuadrado en mitad del patrón y tu logo se coloca ahí. Se eliminan módulos de verdad, así que el código tiene que sobrevivir con un agujero.
  • Detrás de todo el código. Tu logo llena el código y el patrón se dibuja encima. No se quita nada. La imagen aparece en los huecos entre los módulos.

La primera es segura y la segunda llamativa. Si vas a imprimir algo que no podrás reimprimir, usa la primera.

¿Un logo rompe el código?

Un código QR lleva datos redundantes para seguir siendo legible aunque una parte esté sucia, doblada o tapada. Esa redundancia es la corrección de errores y tiene cuatro niveles:

  • L recupera alrededor del 7% del código
  • M alrededor del 15%
  • Q alrededor del 25%
  • H alrededor del 30%

Un logo en el centro es un daño que causas a propósito. El lector no distingue tu marca de una mancha de café: los módulos de debajo hay que reconstruirlos a partir de la redundancia. FigQR cambia automáticamente a H en cuanto añades un logo, y por eso el patrón se vuelve más denso. Esa densidad es el precio del logo, y merece la pena pagarlo.

Si fijas el nivel a mano y dejas el logo, el generador te avisa. Es el único ajuste en el que saltarse el valor por defecto produce con regularidad un código que se ve bien y falla en el móvil.

En el centro el tope es el 28% del ancho del código. Es aritmética, no cautela. H recupera cerca del 30%, y una marca que cubre más de un cuarto del código deja menos redundancia de la que el daño exige. Pasar de ahí daría códigos que funcionan en la pantalla donde los diseñaste y en ningún otro sitio.

En la práctica, entre el 15% y el 20% es el punto justo. El logo se ve con claridad, el código conserva margen para daños reales y el patrón no tiene que crecer.

Poner el logo detrás del código

Esta versión funciona de otra manera, y los controles solo tienen sentido si conoces el mecanismo.

Un código QR son módulos oscuros y módulos claros. Los claros normalmente dejan ver el papel. Aquí se pintan en el color del papel y tu logo se coloca debajo de todo. La imagen aparece entonces en los huecos entre los módulos pintados. No se recorta nada, así que no se gasta corrección de errores y no hay ningún agujero que superar.

De ahí salen dos controles:

  • Tamaño del logo define cuánto del código ocupa la imagen, del 30% al ancho completo.
  • Cuánto se ve del logo encoge los módulos claros. Módulos claros más pequeños significan huecos más anchos y más imagen. Este es el control real del contraste, y subirlo demasiado es lo que acaba rompiendo el código.

Por qué solo se ofrecen algunas formas

Al pasar la colocación a «detrás», la lista de formas se reduce a 10. No es una restricción arbitraria. La imagen solo puede aparecer en el espacio entre módulos, y una forma que llena su celda no deja espacio alguno. El cuadrado por defecto muestra menos de medio por ciento de la imagen, es decir, un código en blanco que además tarda más en dibujarse.

Quedan las formas que dejan sitio de verdad: puntos pequeños, cuadrados pequeños, barras verticales y horizontales, rombos, estrellas y corazones. Si la forma que usas no está entre ellas, el generador te lleva a la más cercana de las disponibles y te lo dice.

El color decide más que el tamaño

Esta es la parte que nadie publica, y la más útil de la página.

Un lector lee un código QR decidiendo, para cada punto, si es oscuro o claro. Tu logo está justo en medio de esa decisión. Un logo de un solo color fuerte, cercano a la tinta del código, cae del mismo lado del umbral que los módulos vecinos y el código sigue siendo legible. Un logo en tonos medios cae a mitad de camino entre la tinta y el papel, y cada celda clara se vuelve ambigua.

Lo medimos sobre imágenes terminadas, no sobre códigos desnudos. Una marca de un solo color con la tinta del código se leyó en un rango amplio de ajustes. El mismo código con una marca de cuatro colores pasó en exactamente una combinación de cincuenta y cuatro, y esa cambiaba de resultado según qué codificador JPEG escribiera el archivo.

Así que, si quieres un logo detrás del código que funcione: un solo color, oscuro y lejos de los tres cuadrados grandes de las esquinas. Son los patrones de búsqueda, lo primero a lo que se agarra un lector. Reducir el logo a cerca del 80% del ancho los deja libres, y suele ser la diferencia entre un código que se lee y otro que no.

Probarlo antes de imprimir

FigQR descodifica la vista previa en tu navegador tras cada cambio, así que el aviso aparece en el momento en que una decisión rompe el código. Tómatelo en serio. Es la misma comprobación que hace un lector y es más estricta que un móvil: un aviso es motivo para mirar, no la prueba de un fallo.

Antes de mandar nada a imprenta:

  1. Escanéalo desde la pantalla, a la distancia a la que se usará de verdad.
  2. Escanéalo otra vez ya impreso, sobre el material real.
  3. Prueba con un segundo móvil. Eso separa un código al límite de una cámara rara.

Para todo lo impreso descarga el SVG, que se mantiene nítido a cualquier tamaño. PDF y EPS están para las imprentas, y el PNG es para pantallas.

Si no se escanea

  1. Reduce el logo. Lo primero que hay que probar, y suele bastar.
  2. Comprueba la corrección de errores. Con logo debe estar en H. Si la fijaste a mano, devuélvela.
  3. Sube el contraste. Un logo pálido sobre fondo pálido es la causa habitual, y en pantalla se ve bien hasta el final.
  4. Aparta el logo de las esquinas. Los tres cuadrados de las esquinas son lo que permite al lector encontrar el código.
  5. Imprímelo más grande. Un código con logo lleva los mismos datos en un patrón más denso y necesita más ancho.

Preguntas frecuentes

¿Un logo impide que el código QR se escanee?

No, si el código está preparado. Un logo en el centro tapa módulos, y esos módulos desaparecen de verdad: el código tiene que poder reconstruirlos. De eso se encarga la corrección de errores, y FigQR sube al nivel más alto en cuanto añades un logo. Un logo colocado detrás del código, en cambio, no elimina nada.

¿Cómo de grande puede ser el logo?

En el centro, hasta el 28% del ancho del código. Es un tope, no una sugerencia: el nivel más alto recupera cerca del 30% del código, y pasado un cuarto falta más de lo que cualquier nivel puede reconstruir. Detrás del código el logo puede ocupar todo el ancho, porque se sitúa bajo el patrón en lugar de sustituir una parte.

¿Qué archivo debo subir?

Cualquier imagen que tu navegador sepa abrir: PNG, JPG, SVG o WebP. Para el centro, un PNG con fondo transparente da el resultado más limpio, porque un recuadro blanco alrededor del logo se come el espacio que el código necesita. Detrás del código la transparencia importa poco, ya que el patrón se dibuja encima igualmente.

¿Mi logo se sube a vuestro servidor?

No. Todo el generador funciona en tu navegador y el logo se lee directamente del archivo que eliges. Nunca sale de tu dispositivo. Por eso tampoco hace falta una cuenta ni hay nada que borrar después.

¿Puedo usar un logo que no es mío?

En tus propios materiales, por lo general no sin permiso. Una marca protege el signo, no el dibujo: encontrar un icono con licencia libre no otorga ningún derecho sobre la identidad de una empresa. Señalar a su titular es normal, por ejemplo un enlace de reseñas de Google para tu propio negocio. Usarlo para promocionar tu producto da a entender un respaldo que nunca se concedió.

¿Logo en el centro o detrás?

En el centro para casi todo lo impreso. Es la convención reconocible, funciona con cualquier forma de módulo y aguanta en tamaños pequeños. Detrás es la opción llamativa y es más frágil: necesita una de las formas ofrecidas, pide un único color fuerte y conviene probarla con el móvil antes de que acabe en algo definitivo.

Crea uno que no caduque nunca

Gratis, sin cuenta y generado íntegramente en tu navegador. Tu destino va directo al patrón.

Abrir el generador

Sigue leyendo

O crea un código