Cómo agregar un logo animado al header de tu página web

¿Qué formato debe usar un logo en el header?

Un logo en el header es pequeño, aparece en todas las páginas y está junto a la navegación, así que el formato debe ser ligero y el movimiento, breve.

El GIF está limitado a una paleta de 256 colores y a una transparencia de todo o nada, así que los bordes suaves y las sombras se ven dentados sobre cualquier fondo distinto al exacto con el que se exportaron (MDN). También es pesado: en un ejemplo de web.dev, un GIF de 3.7 MB pasó a ser un MP4 de 551 KB y un WebM de 341 KB (web.dev).

Para el video con fondo transparente, Safari necesita HEVC con alfa, y Chromium y Firefox necesitan VP9 con alfa; la guía de video con fondo transparente explica la codificación.

¿Por qué mi logo GIF se muestra como una imagen estática?

Normalmente porque algo entre tu carga y la página lo convirtió. Muchos selectores de logo de los temas y flujos de procesamiento de imágenes redimensionan los archivos subidos y los vuelven a codificar en un formato estático como JPEG, PNG o WebP, conservando solo el primer fotograma. Revisa el origen del <img> renderizado en las herramientas para desarrolladores de tu navegador: si la URL ya no termina en .gif o incluye parámetros de redimensionamiento, la animación se eliminó.

Otras causas comunes:

• El GIF se exportó para reproducirse una sola vez y terminó antes de que lo vieras. Recarga la página para comprobarlo.
• Un fondo CSS o un contenedor con object-fit está mostrando una imagen alternativa en lugar del GIF.
• Un ajuste de movimiento reducido en algunos navegadores o extensiones pausa las imágenes animadas.

En lugar de pelear con el selector de logo, coloca tú mismo la animación en el código del header: un bloque de código personalizado, una sección del tema o la plantilla del header. Así también puedes cambiar a un video o a un archivo de Rive, que se ven mejor y pesan menos que el GIF.

¿Cómo reproduces la animación del logo una vez y luego la dejas quieta?

Con video, omite loop. Un video terminado se queda en su último fotograma, así que haz que ese fotograma sea tu logo en reposo. El video en línea sin sonido puede reproducirse automáticamente en Chrome y en Safari de iOS (MDN, WebKit), pero inícialo desde un script para poder respetar el movimiento reducido:

<a href="/" class="logo" aria-label="Acme home">
  <video id="logo-anim" width="160" height="40" muted playsinline preload="auto"
         poster="/logo-still.png" aria-hidden="true">
    <source src="/logo.mov" type='video/quicktime; codecs="hvc1"'>
    <source src="/logo.webm" type="video/webm">
  </video>
</a>

<script>
const v = document.getElementById("logo-anim");
if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
  v.play().catch(() => {}); // blocked: the poster stays visible
}
</script>

El póster es el logo estático, así que los visitantes con movimiento reducido, reproducción automática bloqueada o una conexión lenta ven un header correcto. El enlace conserva su nombre accesible mediante aria-label.

Con Rive, usa una máquina de estados (state machine) cuya intro termine en un estado de reposo (idle), y mantén el reposo sutil o totalmente quieto. También puedes reproducir la intro solo en la primera página que vea el visitante guardando una marca en sessionStorage, para que el logo no se repita en cada navegación.

El set de Charmotion incluye este patrón: sube tu logo y el .riv contiene una intro de inicio que se reproduce una vez y se asienta en idle, además de reacciones puntuales como success que puedes disparar con eventos como un registro completado (el .riv está incluido en todos los planes de pago).

Mantén la intro muy por debajo de cinco segundos. El criterio 2.2.2 de WCAG 2.2 exige un mecanismo para pausar, detener u ocultar el movimiento automático que dure más de cinco segundos junto a otro contenido (W3C), y un logo en loop en el header entra en esa categoría.

¿Cómo mantienes el logo del header nítido y ligero?

• Reserva el espacio. Define los atributos width y height en el video o el canvas, o aspect-ratio en CSS, para que el header se maquete antes de que cargue el archivo. Los elementos que cambian de tamaño después de cargar provocan layout shift, que Core Web Vitals mide como CLS (web.dev).
• Exporta al doble del tamaño de visualización. Un logo que se muestra a 160 × 40 píxeles CSS necesita unos 320 × 80 píxeles para pantallas de alta densidad. Un video cuadrado de 1080 píxeles aquí es ancho de banda desperdiciado.
• Recorta el clip. De uno a tres segundos suele ser suficiente. Los clips más cortos pesan menos.
• Ajusta el canvas de Rive a su contenedor. Llama a resizeDrawingSurfaceToCanvas() en onLoad para que el arte vectorial se renderice nítido según la densidad de píxeles del dispositivo (Rive).
• No bloquees la página. Carga el runtime de Rive de forma asíncrona; el póster o un <img> estático ocupa el espacio hasta que esté listo.

Prueba también el header con el ancho de un teléfono. Muchos sitios reducen el logo en móvil; si los detalles de la animación desaparecen a ese tamaño, muestra ahí la versión estática.

¿Cómo haces que el logo reaccione al hover o a los clics?

Una pequeña reacción al hover o al clic puede dar vida a un logo sin que se mueva todo el tiempo. Limítala a una reacción puntual breve que vuelva al estado de reposo.

Para un logo SVG, basta con una transición CSS en :hover y :focus-visible, como una ligera escala o rotación con transform. Para un logo de Rive, dispara un trigger desde tus propios manejadores de eventos en lugar de depender de los listeners de Rive, para que también se pueda reproducir con el foco del teclado:

const link = document.querySelector(".logo");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");

function react() {
  if (reduce.matches) return;
  r.viewModelInstance?.trigger("success").trigger();
}
link.addEventListener("mouseenter", react);
link.addEventListener("focus", react);

La API de triggers que se muestra es la de Data Binding de Rive para web (autoBind: true); con inputs heredados, llama a fire() en el input del trigger. Limita la frecuencia de la reacción, por ejemplo una vez cada pocos segundos, para que mover el puntero por el header no la repita una y otra vez.

El criterio 2.3.3 de WCAG 2.2 (Animación desde interacciones, nivel AAA) pide que el movimiento activado por una interacción se pueda desactivar, salvo que sea esencial (W3C). Comprobar prefers-reduced-motion antes de disparar el trigger cubre ese requisito en la mayoría de los sitios. La guía de máquinas de estados de Rive explica los triggers con más detalle.

¿Cómo lo agregas en Webflow, WordPress o Shopify?

El principio es el mismo en todas partes: coloca la animación en el marcado del header, no en el campo de carga del logo.

• Webflow es compatible con Rive de forma nativa. Sube el .riv a Assets y arrastra el elemento Rive desde Add > Media a la barra de navegación; luego elige el artboard, la máquina de estados, el ajuste (fit) y la reproducción automática (Rive).
• WordPress: el bloque Video del núcleo incluye los ajustes Reproducción automática, Bucle, Silenciado, Reproducir en línea y Póster, así que puedes crear un video de header que se reproduzca una sola vez sin código, en la parte de plantilla del header de un tema de bloques (WordPress.org). Para Rive, pega el fragmento del runtime web en un bloque HTML personalizado.
• Shopify no tiene una sección nativa para Rive ni para Lottie. Si tu tema ofrece una sección Custom Liquid, puedes agregar ahí el marcado del video o de Rive (Shopify); si no, tendrás que editar la sección del header en el código del tema.

Guías paso a paso por plataforma: Webflow, WordPress y Shopify.

Cómo agregar un logo animado al header de tu sitio web

1. Elige el formato. Usa SVG para movimientos vectoriales simples, un archivo Rive para una intro con reacciones, o un par de HEVC .mov y VP9 WebM para un logo prerenderizado con fondo transparente. Evita el GIF.
2. Exporta al tamaño correcto. Renderiza a aproximadamente el doble del tamaño CSS en pantalla, limita el clip a unos pocos segundos y haz que el último fotograma sea el logo en reposo.
3. Reserva el espacio. Define width y height o aspect-ratio en el video o el canvas para que el header no se desplace al cargar.
4. Reprodúcelo una vez con script. Omite loop, agrega muted y playsinline, y llama a play() solo cuando no se haya solicitado movimiento reducido.
5. Conserva una alternativa estática. Usa el logo estático como imagen poster, mantén un nombre accesible en el enlace a la página de inicio y revisa el header en ancho de móvil.

Preguntas frecuentes

¿El logo animado del header debería estar en loop?

Normalmente no. Un logo que se reproduce una vez y se detiene atrae la atención sin competir con la navegación. Según el criterio 2.2.2 de WCAG 2.2, el movimiento continuo de más de cinco segundos junto a otro contenido necesita un mecanismo para pausarlo, detenerlo u ocultarlo, algo poco práctico en un logo.

¿Puedo usar un SVG animado para mi logo?

Sí, para logos vectoriales planos con movimientos simples, como un trazo que se dibuja o un fundido. Anima transform y opacity siempre que puedas y envuelve el movimiento en una comprobación de prefers-reduced-motion. El movimiento complejo de personajes es más fácil de crear y controlar en Rive.

¿Un video de logo con reproducción automática se reproduce en iPhone?

Sí, si está silenciado y tiene el atributo playsinline. Safari en iOS solo reproduce automáticamente videos sin sonido o silenciados que estén visibles en pantalla. Si se rechaza play(), la imagen poster sigue visible, así que usa tu logo estático como poster.

¿Un logo animado afecta la velocidad de la página?

No, si es liviano y su espacio está reservado. Exporta al tamaño en pantalla, mantén el clip corto, define width y height para evitar el layout shift (salto de diseño) y carga el runtime de Rive o el video sin bloquear el resto de la página.

Respuestas rápidas de esta guía

• ¿Cómo hago que la animación del logo del header se reproduzca una sola vez?

Fuentes

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• Cumulative Layout Shift (CLS), web.dev
• Web (JS) runtime, Rive
• Rive is natively supported in Webflow, Rive