Ir al contenido
charmotion
Empieza ahora

Dónde usar un ícono de app animado: sitio web, kit de prensa y video de lanzamiento

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Dónde usar un ícono de app animado: sitio web, press kit y video de lanzamiento, con personajes de demostración de Charmotion

Un ícono de app animado va donde tú controlas los píxeles: la sección hero de tu landing page, como WebM transparente más MOV HEVC para Safari; tu press kit; la galería de Product Hunt; un video de inicio 9:16 para Reels, TikTok y Shorts; y los videos de vista previa de las tiendas hechos con grabaciones reales de la app. El ícono de la ficha en la tienda sigue siendo un PNG estático.

Puntos clave

  • Publica el ícono del hero con una fuente MOV HEVC con alfa primero y una WebM VP9 con alfa después, junto con un póster estático.
  • Reproduce la intro una vez y mantén el fotograma de reposo; los loops largos necesitan un control de pausa.
  • Un press kit necesita el ícono estático y archivos animados con fondo transparente y con fondo opaco.
  • Abre un video de inicio 9:16 con la intro del ícono y luego muestra la app.
  • Los íconos de las tiendas son estáticos: Google Play pide un PNG de 512×512 de hasta 1024 KB.

¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.

¿Cómo pones un ícono de app animado en la sección hero de una landing page?

Usa un video con fondo transparente con dos fuentes y un póster. Safari reproduce HEVC con alfa; Chrome y Firefox reproducen VP9 con alfa en WebM. Pon primero la fuente HEVC: Safari reproduce WebM pero descarta su canal alfa, así que debe elegir el MOV, que es el orden que recomienda Jake Archibald (Jake Archibald).

<video class="hero-icon" width="320" height="320"
       autoplay muted playsinline
       poster="/img/app-icon-rest.webp">
  <source src="/video/app-icon-intro.mov" type='video/mp4; codecs="hvc1"'>
  <source src="/video/app-icon-intro.webm" type="video/webm">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-icon { display: none; }
    .hero-icon-still { display: block; }
  }
</style>
  • muted y playsinline son lo que permite la reproducción automática; la reproducción automática sin sonido está permitida en general, y Safari en iOS necesita playsinline para reproducirse dentro de la página (MDN).
  • Un ancho y un alto fijos evitan el layout shift (salto de diseño) mientras carga el video.
  • El póster es el ícono en reposo, así el hero se ve terminado aunque el video nunca se reproduzca.
  • Con movimiento reducido se muestra una imagen estática en su lugar (MDN).

Para un ícono que además reaccione al hover o al scroll, un archivo .riv con una máquina de estados hace lo mismo de forma interactiva. Marcado completo y alternativas: video con fondo transparente en un sitio web y logo animado en el header de un sitio web.

¿El ícono del sitio web debe reproducirse una vez o en loop?

Reproduce la intro una vez y mantén el fotograma de reposo. Una intro corta que termina en el ícono se siente como un saludo; el mismo clip en loop sin fin se vuelve ruido junto a tu titular.

Si quieres que siga con vida, cambia a un loop en reposo (idle) suave, como una respiración lenta o un parpadeo ocasional, en lugar de repetir la entrada. Ten en cuenta la accesibilidad: el criterio de conformidad 2.2.2 de WCAG 2.2 pide una forma de pausar, detener u ocultar el contenido en movimiento que empieza automáticamente, dura más de cinco segundos y se muestra junto a otro contenido (W3C WAI). Una intro que se reproduce una sola vez y dura menos de cinco segundos evita el problema; un loop necesita un control de pausa.

¿Qué debe incluir el press kit de un ícono de app?

Periodistas, partners y directorios de apps necesitan cada uno un archivo distinto. Una carpeta completa del ícono los cubre a todos:

ArchivoFinalidad
Ícono estático, PNG de 1024×1024El tamaño de diseño del ícono de iOS de Apple; el predeterminado para artículos y fichas
MOV con fondo transparente (HEVC con canal alfa)Editores de video en Mac, Keynote, páginas en Safari
WebM con fondo transparente (VP9 con canal alfa)Embeds web en Chrome y Firefox
MP4 sobre el color de tu marcaCualquier lugar sin soporte de transparencia: publicaciones en redes sociales, presentaciones, apps de chat
GIFLugares que no aceptan ningún video, como algunos foros y el correo electrónico
Video de inicio en 9:16Stories, Reels, TikTok y Shorts

Nombra los archivos de forma sencilla (appname-icon-intro.mov, appname-icon-1024.png) e incluye una breve nota sobre el espacio de respeto y los colores de fondo. Un GIF pesa mucho más que el mismo clip en video, así que ofrécelo solo como respaldo (web.dev).

¿Cómo usar un ícono animado en Product Hunt?

Product Hunt permite que tu miniatura sea un GIF animado, que se reproduce mientras alguien pasa el cursor sobre tu publicación. Por eso la mayoría de la gente solo ve su primer fotograma, así que empieza la miniatura con el ícono en reposo (la versión "el ícono cobra vida" de tu intro, recortada en formato cuadrado) y no con un fotograma vacío.

En la galería, empieza por lo que hace el producto y usa la animación del ícono como apertura o fotograma de cierre, no como una diapositiva entera. Las dimensiones, los límites de peso del archivo y los consejos para GIF están en especificaciones del GIF de lanzamiento en Product Hunt.

¿Cómo armar un video de inicio en 9:16 en torno a tu ícono?

Muestra el ícono al principio y al final, y deja que las grabaciones de la app en la parte central hagan el trabajo de convencer:

  1. Apertura (primeros 1 a 3 segundos): la intro del ícono sobre el color de tu marca. Detiene el scroll y deja claro de quién es el video.
  2. Parte central: grabaciones reales de la app, una función por momento, con subtítulos, ya que la mayoría lo ve sin sonido.
  3. Cierre: el ícono en reposo, el nombre de la app y dónde conseguirla.

Mantén el texto y el ícono lejos de los bordes, donde se ubican los botones y los textos de la plataforma; las zonas seguras de cada plataforma están en especificaciones de video vertical para Reels, TikTok y Shorts.

Charmotion produce las piezas para esto a partir de una imagen de tu ícono: un video de inicio 9:16, MP4 a 1080×1080, GIF y el WebM y el MOV HEVC transparentes para tu sitio, junto con el .riv para la app. Todo viene con los planes de pago.

¿Puede aparecer un ícono animado en la App Store o en Google Play?

No como ícono. Ambas tiendas muestran un ícono estático, pero las dos tienen un espacio para video donde tu ícono animado puede aparecer dentro de grabaciones reales de la app.

  • App Store: la directriz 2.3.4 indica que las App Previews solo pueden usar capturas de video de la pantalla de la propia app, y se permiten narración y overlays de video o texto (App Review Guidelines). Tu intro de inicio dentro de la app, capturada desde el dispositivo, está permitida; una animación de logo independiente hecha con motion graphics, no. Especificaciones: especificaciones de App Preview en la App Store.
  • Google Play: el ícono de la app es un PNG de 32 bits con alfa, de 512×512 px y 1024 KB como máximo. El video de vista previa es una URL de YouTube; puede reproducirse automáticamente en línea, sin sonido, durante un máximo de 30 segundos, y no puede estar monetizado, ser privado ni tener restricción de edad (Ayuda de Play Console). Más información en gráfico de funciones y video promocional de Google Play.

Preguntas frecuentes

¿Puedo usar un video con fondo transparente del ícono de mi app en Safari y Chrome?

Sí, con dos fuentes: un MOV HEVC con alfa para Safari, en primer lugar, y un WebM VP9 con alfa para Chrome y Firefox. Agrega un póster estático del ícono en reposo y dimensiones fijas para que nunca haya layout shift (salto de diseño).

¿El ícono animado de mi sitio web debería reproducirse automáticamente?

Una intro corta, sin sonido y que se reproduzca una sola vez y termine en el ícono estático puede reproducirse automáticamente sin problema. Agrega playsinline para Safari en iOS, conserva el póster como respaldo si play() se bloquea y muestra solo la imagen estática cuando el visitante prefiera movimiento reducido.

¿El video de vista previa de Google Play puede mostrar mi ícono animado?

Sí. La vista previa es un video de YouTube que vinculas en Play Console, y puede reproducirse automáticamente sin sonido durante un máximo de 30 segundos, así que abre con la intro de tu ícono y pasa rápido a grabaciones reales de la app. Desactiva los anuncios en ese video y mantenlo público o no listado.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas