Skip to content
charmotion
Get started

Where an Animated App Icon Belongs: Website, Press Kit and Launch Video

By the Charmotion team · Updated

Cover illustration for the guide: Where an Animated App Icon Belongs: Website, Press Kit and Launch Video, with Charmotion demo characters

An animated app icon belongs where you control the pixels: your landing page hero, as transparent WebM plus HEVC MOV for Safari, your press kit, the Product Hunt gallery, a 9:16 launch video for Reels, TikTok and Shorts, and store preview videos built from real app footage. The store listing icon itself stays a still PNG.

Key takeaways

  • Ship the hero icon as an HEVC alpha MOV source first and a VP9 alpha WebM second, with a still poster.
  • Play the intro once and hold the resting frame; long loops need a pause control.
  • A press kit needs the still icon plus transparent and opaque motion files.
  • Open a 9:16 launch video with the icon intro, then show the app.
  • Store icons are still: Google Play wants a 512×512 PNG up to 1,024 KB.

Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.

How do you put an animated app icon in a landing page hero?

Use a transparent video with two sources and a poster. Safari plays HEVC with alpha; Chrome and Firefox play VP9 with alpha in WebM. Put the HEVC source first: Safari plays WebM but drops its alpha channel, so it must pick the MOV, which is the order Jake Archibald recommends (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 and playsinline are what let it autoplay; muted autoplay is broadly allowed, and iOS Safari needs playsinline to play in the page (MDN).
  • Fixed width and height keep the layout from shifting while the video loads.
  • The poster is the resting icon, so the hero looks finished even if the video never plays.
  • Reduced motion gets a still image instead (MDN).

For an icon that also reacts to hover or scroll, a .riv file with a state machine does the same job interactively. Full markup and fallbacks: transparent video on a website and animated logo in a website header.

Should the website icon play once or loop?

Play the intro once and hold the resting frame. A short intro that ends on the icon feels like a greeting; the same clip looping forever becomes noise next to your headline.

If you want ongoing life, switch to a gentle idle loop (a slow breathe or an occasional blink) rather than replaying the entrance. Keep accessibility in mind: WCAG 2.2 success criterion 2.2.2 asks for a way to pause, stop or hide moving content that starts automatically, lasts more than five seconds and is shown alongside other content (W3C WAI). A one-shot intro under five seconds avoids the issue; a loop needs a pause control.

What should an app icon press kit include?

Journalists, partners and app directories each need a different file. A complete icon folder covers all of them:

FileWhy
Still icon, 1024×1024 PNGApple's iOS icon layout size; the default for articles and listings
Transparent MOV (HEVC alpha)Video editors on Mac, Keynote, Safari pages
Transparent WebM (VP9 alpha)Web embeds in Chrome and Firefox
MP4 on your brand colorAnywhere transparency isn't supported: social posts, slide decks, chat apps
GIFPlaces that accept no video at all, such as some forums and email
9:16 launch videoStories, Reels, TikTok and Shorts

Name files plainly (appname-icon-intro.mov, appname-icon-1024.png) and include a short note on clear space and background colors. A GIF is far heavier than the same clip as video, so offer it only as a fallback (web.dev).

How do you use an animated icon on Product Hunt?

Product Hunt lets your thumbnail be an animated GIF, and it animates while someone hovers over your post. Most people therefore see its first frame, so start the thumbnail on the resting icon (the "icon comes alive" version of your intro, cropped square) rather than on an empty frame.

In the gallery, lead with what the product does, and use the icon animation as an opener or a closing frame rather than a whole slide. Dimensions, file size limits and GIF tips are in Product Hunt launch GIF specs.

How do you build a 9:16 launch video around your icon?

Show the icon at the start and at the end, and let the app footage in the middle do the convincing:

  1. Open (first 1 to 3 seconds): the icon intro on your brand color. It stops the scroll and states whose video this is.
  2. Middle: real app footage, one feature per beat, with captions, since most people watch muted.
  3. Close: the resting icon, the app name and where to get it.

Keep text and the icon away from the edges, where platform buttons and captions sit; safe zones per platform are in vertical video specs for Reels, TikTok and Shorts.

Charmotion produces the pieces for this from one image of your icon: a 9:16 launch video, MP4 at 1080×1080, GIF, and the transparent WebM and HEVC MOV for your site, alongside the .riv for the app. All of it comes with the paid plans.

Can an animated icon appear on the App Store or Google Play?

Not as the icon. Both stores show a still icon, but both have a video slot where your animated icon can appear inside real app footage.

  • App Store: guideline 2.3.4 says App Previews may only use video screen captures of the app itself, with narration and video or text overlays allowed (App Review Guidelines). Your in-app launch intro, captured from the device, is allowed; a standalone motion-graphics logo animation is not. Specs: App Store App Preview specs.
  • Google Play: the app icon is a 512×512 px, 32-bit PNG with alpha, at most 1,024 KB. The preview video is a YouTube URL; it may autoplay inline, muted, for up to 30 seconds, and it must not be monetized, private or age-restricted (Play Console Help). More in Google Play feature graphic and promo video.

Frequently asked questions

Can I use a transparent video of my app icon on Safari and Chrome?

Yes, with two sources: an HEVC MOV with alpha for Safari, listed first, and a VP9 WebM with alpha for Chrome and Firefox. Add a still poster of the resting icon and fixed dimensions so the layout never shifts.

Should the animated icon on my site autoplay?

A short, muted, one-shot intro that ends on the still icon is fine to autoplay. Add playsinline for iOS Safari, keep the poster as a fallback if play() is blocked, and show only the still image when the visitor prefers reduced motion.

Can my Google Play preview video show my animated icon?

Yes. The preview is a YouTube video you link in Play Console, and it may autoplay muted for up to 30 seconds, so open with your icon intro and move quickly to real app footage. Disable ads on that video and keep it public or unlisted.

Quick answers from this guide

Sources

Related guides