Cuatro diseños originales de banner de cookies que puedes editar y copiar, un comprobador que señala las opciones arriesgadas según la guía de la ICO del Reino Unido y código de Google Consent Mode v2.
Un buen banner de cookies ofrece Aceptar todo y Rechazar todo uno al lado del otro, con una forma de elegir por categoría, y mantiene desactivados todos los interruptores no esenciales hasta que el visitante actúa. Abajo tienes cuatro diseños originales de banner para editar y copiar, un comprobador que señala las opciones arriesgadas y el código de Google Consent Mode que los acompaña.
Opciones del banner de un vistazo (según la guía de la ICO del Reino Unido, a octubre de 2026)
La mayoría de las galerías de banners muestran capturas de banners de otras empresas sin decir si cumplen las normas. Los ejemplos de aquí son diseños propios, en vivo y editables, y cada uno va acompañado de lo que dice realmente la guía del regulador británico sobre el rechazo, los valores por defecto y el silencio. Esta página explica patrones de diseño; no es asesoramiento legal.
La página de la ICO del Reino Unido sobre la gestión del consentimiento describe como buena práctica un mecanismo que haga tan fácil rechazar el consentimiento como aceptarlo, y su ejemplo de mala práctica es un banner con Aceptar todo pero sin Rechazar todo. En otros lugares las normas las fija la autoridad de cada país, así que revisa la guía de los países a los que te diriges.
La ICO dice que el silencio o la inactividad no cuentan como consentimiento, y califica un pop-up que trata el uso continuado como consentimiento como una activación previa de cookies sin consentimiento. Si un visitante ignora el banner, mantén desactivadas las cookies no esenciales.
Las cookies estrictamente necesarias para algo que el visitante ha pedido, como un carrito de la compra o un inicio de sesión, entran en una exención. La ICO señala que las cookies útiles o prácticas pero no esenciales siguen necesitando consentimiento.
Es una forma de indicar a las etiquetas de Google si el visitante ha dado su consentimiento. Defines un valor por defecto con gtag('consent', 'default', ...) antes de que se carguen las etiquetas y luego llamas a gtag('consent', 'update', ...) cuando el visitante elige. La versión 2 añadió los parámetros ad_user_data y ad_personalization junto a ad_storage y analytics_storage.
Las dos opciones pueden funcionar. Una barra inferior deja la página legible, mientras que una ventana centrada consigue una decisión más rápida pero tapa el contenido. Lo que más importa es que ambas opciones sean igual de fáciles y que no se ejecute nada no esencial antes.
Cada vista previa se ejecuta en un entorno aislado con los scripts desactivados, así que aquí los botones no hacen nada. Copia el marcado y conecta los botones a tu propio código de consentimiento.
El diseño más habitual. Aceptar y Rechazar comparten el mismo estilo; Elegir abre tu panel de configuración.
Ocupa menos espacio en pantallas grandes. En un móvil, deja que se extienda a todo el ancho.
Las cookies necesarias se muestran siempre activas; todas las demás casillas empiezan sin marcar.
Un pequeño enlace en el pie de cada página permite a los visitantes cambiar de opinión en cualquier momento.
Si tu web usa etiquetas de Google, define el valor por defecto antes de que se carguen las etiquetas y actualízalo cuando el visitante elija. Los nombres de parámetros de abajo son los de la documentación de Google sobre el modo de consentimiento.
Parámetros de Consent Mode
La llamada por defecto va antes del fragmento de tu etiqueta de Google. wait_for_update da al banner 500 milisegundos para enviar una actualización antes de que se disparen las etiquetas.
Diseño
Barra inferior
Ventana en la esquina
Ventana centrada
Qué hace tu banner
Rechazar todo está en la primera pantalla
Aceptar y Rechazar tienen el mismo aspecto
El interruptor de analítica empieza activado
El texto dice que seguir navegando implica consentimiento
Un enlace de Configuración de cookies permite cambiar de opinión
Vista previa
Usamos cookies para que esta web funcione y, si aceptas, para medir las visitas.
Si sigues navegando, aceptas nuestro uso de cookies.
Aceptar todo
Rechazar todo
Elegir
Analítica
Notas
No se han encontrado opciones arriesgadas en lo que has elegido.
No hay Rechazar todo en la primera pantalla. La ICO describe como buena práctica que rechazar el consentimiento sea tan fácil como aceptarlo.
Rechazar parece más débil que Aceptar. En nuestra opinión, esto hace que rechazar sea más difícil que aceptar; una pareja igualada es el diseño más seguro.
Un interruptor no esencial empieza activado. En los ejemplos de buena práctica de la ICO, los interruptores de tecnologías no exentas están desactivados por defecto.
Seguir navegando se trata como consentimiento. La ICO dice que el silencio o la inactividad no cuentan.
No hay forma de cambiar la elección más tarde. La ICO dice que los usuarios deben poder activar o desactivar fácilmente las cookies no esenciales.
Una ayuda de diseño basada en la guía publicada por la ICO, no asesoramiento legal.
Empieza gratis · Sin tarjeta de crédito