Formatos de logo animado: ¿MP4, GIF, WebM o Lottie?

Los formatos de logo animado se eligen según dónde se va a reproducir: MP4 para video, WebM con un MP4 de respaldo para tu sitio web, GIF para la firma de correo, y GIF o WebP animado para chats y formularios que solo aceptan imágenes. Lottie o SVG animado solo hacen falta cuando el logo tiene que seguir siendo vectorial dentro de una app.

Los formatos de logo animado se agrupan en tres familias:

• Video (MP4, WebM, MOV): necesita reproductor.
• Imágenes animadas (GIF, WebP animado, APNG): se reproducen donde entra una imagen.
• Vectoriales (Lottie, SVG animado): guardan formas en lugar de píxeles.

Exportamos 21 animaciones de logo a los cinco formatos de descarga de MorphLogo y pesamos cada archivo: el GIF pesó más que el MP4 original en todos los casos.

¿Tienes el logo pero todavía no la animación? Genérala y descárgala en MP4, WebM, WebP, GIF o GIF para firma de correo. Animar mi logo con IA →

Sube un PNG, JPG, WebP o SVG; el clip está listo en unos minutos. Puedes generar una vista previa gratis con marca de agua; cualquier descarga necesita un paquete de créditos o la suscripción.

¿Qué formato es mejor para un logo animado?

El que el destino reproduce sin ayuda: los programas de correo animan GIF pero no video, y algunos formularios solo aceptan imágenes. Casi siempre terminas con un MP4 para todo lo que sea video, un GIF para el correo y, si el logo va en tu sitio web, un WebM.

Dónde va el logo	Usa	Por qué
Portada o encabezado de tu sitio web	WebM, con MP4 de respaldo	Pesó menos que nuestro MP4, WebP y GIF en las 21 pruebas
Firma de correo	GIF para firma de correo	Gmail y Outlook 2007–2019 para Windows no reproducen video en el correo
WhatsApp, foros, formularios que solo aceptan imágenes	GIF, o WebP animado donde lo acepten	Se reproduce solo y en bucle, sin reproductor
YouTube, redes sociales, anuncios, editores de video	MP4	Es el clip original, con sonido si lo agregaste
Presentaciones	MP4; GIF en Google Slides	Microsoft recomienda MP4 con H.264 para PowerPoint; Apple dice que H.264 se reproduce en todos sus dispositivos; Slides acepta GIF como imagen
Interfaz de una app, pantallas de carga, efectos al pasar el cursor	Lottie o SVG animado	Sigue siendo vectorial y se controla con código
Logo de una página de empresa en LinkedIn	PNG o JPEG fijo	LinkedIn solo acepta PNG o JPEG para esas imágenes

¿Qué formato uso en un editor de video?

El MP4: es el propio clip generado, sin volver a comprimirlo. H.264 está en la lista de formatos compatibles de Final Cut Pro; WebM no. Para una intro en 16:9, genera el clip en 16:9 (MorphLogo también hace 4:3, 1:1, 3:4 y 9:16) en vez de recortar uno cuadrado.

¿MP4 o GIF para un logo animado?

Usa MP4 donde se pueda reproducir video y GIF solo donde no. En nuestras pruebas el GIF pesó más que el MP4 en los 21 clips, con un cuarto de los píxeles y 15 fotogramas por segundo en lugar de 24.

Cómo lo medimos. El 19 de septiembre de 2026 convertimos 21 clips cuadrados de cuatro segundos (960 × 960 px a 24 fps, los mismos de nuestra galería de ejemplos de logos animados) con el mismo servicio y la misma configuración que generan las descargas de los usuarios. Los pesos van en sistema decimal: 1 KB son 1,000 bytes.

El MP4 es el clip original; los otros cuatro se convierten a partir de él al descargar, y ceden píxeles, fotogramas o colores a cambio de un archivo más ligero o más compatible.

Formato	Tamaño y fotogramas	Colores	Bucle
MP4 (H.264)	Tamaño del clip (960 px aquí), 24 fps	Color completo	Si el reproductor lo repite
WebM (VP9)	Lado corto de hasta 1,080 px (960 px aquí), 24 fps	Color completo	Si el reproductor lo repite
WebP animado	Lado corto de hasta 720 px, 24 fps	Color completo	Infinito
GIF	Lado largo de 480 px, 15 fps	Hasta 256 por fotograma	Infinito
GIF para firma de correo	Lado largo de 240 px, 10 fps	64	Se reproduce una vez

Solo el MP4 y el WebM llevan sonido, y solo si lo agregaste.

Formato	Peso mediano	Rango en 21 clips	Frente al MP4 (mediana)
MP4	2.00 MB	1.36–2.94 MB	1×
WebM	496 KB	55 KB–1.60 MB	0.25×
WebP animado	984 KB	416 KB–1.77 MB	0.44×
GIF	3.65 MB	2.5–6.4 MB	1.86×
GIF para firma de correo	509 KB	343–862 KB	0.26×

MP4, WebM y WebP son casi idénticos; el GIF llena el degradado de puntos de tramado (dithering), y el GIF para firma se ve en bloques al ampliarlo, aunque no al tamaño de una firma.

¿Por qué un GIF pesa más que el video del que salió?

Un GIF solo se ahorra los píxeles que no cambian entre fotogramas, y los clips generados tienen un grano fino en el fondo, así que casi todo se reescribe en cada fotograma. Además, la especificación GIF89a limita cada fotograma a 256 colores, y los degradados se simulan con puntos de tramado que comprimen mal. En cambio, los códecs de video guardan solo lo que cambia, y a todo color.

La guía web.dev de Google muestra una brecha mayor: un GIF de 3.7 MB contra un MP4 de 551 KB. Esa guía convierte el MP4 al tamaño del GIF. Nuestro MP4 tiene el doble de ancho y, aun así, el GIF pesó entre 1.2 y 2.6 veces más.

El GIF sigue ganando en el correo y en cualquier lugar que acepte imágenes pero no video; para eso, el creador de logo en GIF saca los dos tamaños de GIF del mismo clip.

¿Dónde encaja el WebP animado?

El WebP animado queda en medio: color completo y bucle infinito sin reproductor, con un poco menos de la mitad del peso del MP4. Lo muestran las versiones actuales de Chrome, Edge, Firefox y Safari (Can I use); Gmail lo convierte en un JPEG fijo (Can I email). Úsalo donde una plataforma acepte imágenes pero no video.

¿Qué es Lottie y cuándo necesitas un SVG animado?

Lottie es un formato abierto de animación vectorial creado en 2015 por Hernan Torrisi para exportar animaciones de After Effects; el archivo es JSON y tradicionalmente se exporta con el plugin Bodymovin. Un SVG animado es un archivo de gráficos vectoriales (SVG) animado con CSS o con SMIL. Los dos guardan formas y fotogramas clave, no píxeles.

Ahí está su límite: hay que construirlos a partir de un dibujo vectorial (SVG o Illustrator). En un clip generado, las partículas o los destellos son solo píxeles, y un video no se puede convertir de vuelta en formas vectoriales.

MorphLogo no exporta Lottie ni SVG animado: genera video. Para movimiento vectorial usa una herramienta vectorial como LottieFiles, Lottielab o SVGator, o After Effects con Bodymovin (en nuestra comparativa de programas para animar logos está cuál conviene según el archivo que tienes).

¿Un logo animado puede tener fondo transparente?

Sí, si el formato tiene canal alfa, es decir, un valor de transparencia para cada píxel; un GIF solo puede dejar cada píxel totalmente transparente o totalmente opaco.

¿Qué formato de video tiene fondo transparente?

Los formatos de video con fondo transparente son WebM con VP9 y alfa, HEVC con alfa y MOV con ProRes 4444; el MP4 con H.264 no admite transparencia. Entre las imágenes animadas, el WebP animado y el APNG tienen alfa completo, y el GIF solo transparencia de todo o nada.

Formato	Transparencia	Dónde funciona
GIF	Un color totalmente transparente, el resto opaco (GIF89a)	En todas partes, con halos o bordes dentados
APNG	Alfa completo	Navegadores actuales; no en Gmail web ni Android
WebP animado	Alfa completo	Navegadores actuales; Gmail lo convierte en un JPEG fijo
WebM (VP9 con alfa)	Alfa completo	Chrome, Edge y Firefox; Safari ignora el alfa
HEVC con alfa	Alfa completo	Safari en iOS 13 y macOS Catalina o posteriores
MOV (ProRes 4444)	Alfa completo, hasta 16 bits	Editores de video; unos 330 Mbps a 1080p, demasiado pesado para publicarlo
Secuencia PNG	Alfa completo, un PNG por fotograma	Programas de motion design y composición (Apple Motion la exporta); es una carpeta de fotogramas, no un archivo para la web

Por eso un video transparente en un sitio web lleva dos archivos: un WebM VP9 con alfa para la mayoría de los navegadores y un HEVC con alfa para Safari.

¿Qué formatos salen con fondo transparente en MorphLogo?

El fondo transparente es una opción de pago, con condiciones:

• Tu logo tiene que tener fondo transparente (PNG o SVG). Un logo sobre fondo sólido o un JPG no se acepta.
• Funciona con cuatro estilos (Giro de 360°, Flotación suave, Rebote elástico y Explosión de confeti) o con tu propia descripción del movimiento.
• El clip se genera sobre un fondo verde y el verde se recorta al descargar: el WebM, el WebP, el GIF y un MOV (ProRes 4444) salen con canal alfa. El MP4 conserva el fondo verde, porque el formato no admite transparencia.
• Los brillos alrededor del logo se pierden al recortar, y el GIF queda con bordes duros, porque cada píxel es transparente u opaco. Para bordes suaves, usa WebM, WebP o MOV.

Los pesos de la tabla de arriba son de clips con fondo; no medimos los archivos transparentes.

Si no usas la opción transparente, el fondo queda dentro de cada fotograma. Entonces:

• Sube el logo sobre el fondo donde va a ir. El clip parte del color de las esquinas de tu archivo; en nuestra prueba, un blanco puro volvió como #F9F9FC.
• Elige un estilo que empiece con tu logo. Esos mantienen el fondo casi igual; los estilos que revelan el logo, como Ensamblaje de partículas o Ráfaga glitch, pueden cambiar la luz de toda la escena.

¿Cuánto debe pesar un logo animado?

Deja el GIF de la firma de correo por debajo de 500 KB (algunos proveedores de firmas dicen 200 KB) y el clip del sitio web tan ligero como lo permita el movimiento. En nuestras pruebas, un logo cuadrado de cuatro segundos pesó de 55 KB a 1.60 MB en WebM y de 343 a 862 KB como GIF para firma.

¿Cuánto debe pesar el GIF de una firma de correo?

Ni Gmail ni Outlook publican un límite. Litmus recomienda 1 MB como máximo para GIF de correo; para firmas, WiseStamp aconseja menos de 500 KB y Letsignit, 200 KB como máximo. Nuestro GIF para firma pesó 384–402 KB en los estilos que empiezan con el logo: dentro del límite de WiseStamp, no del de Letsignit. Los que pasaron de 500 KB eran movimiento de cuadro completo, como partículas o cristal roto, y ninguno de los 21 bajó de 200 KB.

Lo que decide si se lee no es el formato, sino el tamaño en pantalla. Gmail muestra las imágenes de firma con 100 px de alto como máximo. A esa altura, nuestro logo de prueba pasa de 960 a 100 px. El ícono de diamante queda en unos 16 px y se ve; el logotipo VERTEX, en unos 6 px. El eslogan de dos líneas queda en uno o dos píxeles: ilegible en cualquier formato.

En la firma, deja solo el ícono o el logotipo y pon el eslogan como texto. Outlook para Windows 2007–2019 muestra solo el primer fotograma, así que elige un estilo que empiece con tu logo; los pasos para ponerlo están en nuestra guía de firma de correo animada.

¿Cuánto debe pesar el video de un logo en tu sitio web?

En una página web, el peso es tiempo de carga, y lo decide el movimiento. Los estilos que mantienen el logo entero pesaron 111–143 KB en WebM, y los revelados en boceto 87 KB de mediana; partículas o líquido, que cambian todo el cuadro, llegaron a 615 KB de mediana y hasta 1.60 MB. Un clip más largo, o en 1080p o 4K, agranda el MP4 y el WebM; el WebP se queda en 720 px y los GIF en 480 y 240 px.

¿Cómo poner un logo animado en tu página web?

Ponlo en un elemento HTML <video> silenciado y en bucle, con el WebM primero y el MP4 de respaldo, y usa tu archivo de logo original como imagen de póster.

<video autoplay muted loop playsinline
       poster="/images/logo.png" width="480" height="480">
  <source src="/media/logo-animation.webm" type="video/webm">
  <source src="/media/logo-animation.mp4" type="video/mp4">
</video>

• muted con autoplay: Chrome y Safari en iOS permiten la reproducción automática sin sonido.
• playsinline: en el iPhone, el video se queda dentro de la página en vez de abrirse en pantalla completa.
• loop: vuelve al inicio al terminar (MDN).
• WebM primero: si el MP4 va primero, el navegador lo elige aunque pudiera usar el WebM, más ligero.
• poster: se ve mientras carga. Usa tu archivo de logo: todos los estilos están guiados para terminar en él.

No uses un GIF en la portada. Los nuestros pesaron 8 veces lo que el WebM, en mediana, con menos colores y fotogramas.

Dos revisiones antes de publicarlo:

• Agrega un control de pausa si el clip se repite. El criterio 2.2.2 de las WCAG 2.2 exige poder pausar el contenido que se mueve solo, dura más de cinco segundos y aparece junto a otro contenido. Un clip de cuatro segundos en bucle entra en ese caso: agrega un botón de pausa o controls, o quita loop.
• Revisa el punto del bucle. En 89 clips actuales, Órbita 3D cerró el bucle sin corte en 12 de 19, Giro de 360° casi siempre dejó un saltito, y Revelado cinematográfico parpadeó siempre porque termina más brillante de lo que empieza. La página de logo animado en bucle tiene la tabla de cada estilo.

Preguntas frecuentes sobre formatos de logo animado

¿Qué es un archivo WebM?

WebM es un formato de video abierto y libre de regalías pensado para la web; normalmente lleva video VP8 o VP9 y audio Opus o Vorbis. Lo reproducen los navegadores actuales sin plugins y, en nuestras pruebas, pesó una cuarta parte del MP4 en mediana. Final Cut Pro no lo admite: para editar, conserva el MP4.

¿Se puede animar un PNG?

Sí, como APNG (PNG animado). Funciona como un GIF animado, pero con color de 24 bits y transparencia alfa completa, y lo reproducen las versiones actuales de Chrome, Edge, Firefox y Safari. Donde no hay soporte, solo se ve el primer fotograma, y Gmail en la web y en Android no lo admite. Si lo que quieres es dar movimiento a tu logo en PNG, súbelo a MorphLogo y descarga el clip en MP4, WebM, WebP o GIF; APNG no está entre las descargas.

¿Qué formato lleva un logo: PNG o JPG?

PNG, si el logo va sobre fondos distintos: comprime sin pérdida y admite transparencia, mientras que el JPEG no tiene canal alfa. Para imprenta y para cambiar de tamaño, conserva el original vectorial: SVG, EPS o PDF. MorphLogo acepta PNG, JPG, WebP o SVG; para la opción de fondo transparente, sube un PNG o SVG sin fondo.