Which file format should an animated logo use on the web?
A logo animation is only useful if you have the right file for each place it will live. Designers hand over one export and developers then find it does not fit the header, the email or the app. Here is how I think about
A logo animation is only useful if you have the right file for each place it will live. Designers hand over one export and developers then find it does not fit the header, the email or the app. Here is how I think about the formats.
The formats
| Format | Good for | Watch out for |
|---|---|---|
| MP4 | Intros, outros, profile videos, most websites | No transparency, so it sits in a box |
| MOV with transparency | Overlays in editing software | Large files |
| WebM with transparency | A transparent logo over a web page | Browser support varies, so test it |
| GIF | Email signatures, chat | Limited colors, banding on gradients, no sound |
| Lottie or SVG animation | Headers and UI in sites and apps | Needs separate production from the video version |
A simple setup for a site header
If the logo sits on a plain background, an MP4 is enough. Match the video background to the page color, mute it and keep it short:
<video autoplay muted loop playsinline width="320" height="120"
aria-label="Animated company logo" poster="logo-still.png">
<source src="logo.webm" type="video/webm">
<source src="logo.mp4" type="video/mp4">
</video>
The poster image is your fallback: a still of the final logo frame, so the page never shows an empty box while the video loads or if autoplay is blocked.
If the logo has to sit over changing content, use a transparent format or a Lottie file, and test it in every browser you support before you ship.
What to ask the designer for
- The final video in MP4, with sound
- A silent version for pages and autoplay
- A transparent version if you will overlay it
- Sizes for each platform, including a square or vertical version
- A GIF only if you need it for email or chat
- A still image of the final frame for the poster
Mistakes I see most
- Using an MP4 for an overlay and getting a black or white box around the logo
- Sending a huge file by email instead of a link
- A GIF with a gradient that bands
- Not testing on a phone
- Not asking for the project file, which means any later change needs a rebuild
Start from a vector logo (SVG, AI or EPS). A low-quality PNG limits everything that comes after.
I wrote a longer version with a delivery checklist on my site: Logo animation file formats explained.
Bhavesh Vaghela is a freelance video editor and motion graphics designer in Rajkot, India, working on SaaS and AI product videos.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.