An animated logo on a website does one job: it makes the first second feel alive. Done badly it slows the page down and annoys people. Done well nobody notices the file at all, they just notice the brand.
This guide covers which file format to use, the exact code to paste for each one, where an animated logo works on a site or app, and how to make the file itself for free with our logo animator.
Pick the format first
Four formats cover almost every case. They differ in size, sharpness and whether the background can be see-through.
| Format | Best for | File size | Transparent | Sharp at any size |
|---|---|---|---|---|
| MP4 | Hero sections, full-width reveals | Small | No | No |
| WebM | Logos over photos or colour | Small | Yes | No |
| Lottie (JSON) | Headers, apps, splash screens | Tiny | Yes | Yes |
| GIF | Builders and email tools that only take images | Large | Rough edges | No |
The short version: MP4 for a logo on a solid background, Lottie for a logo in a header or app, GIF only when nothing else is allowed. GIF is the oldest and the heaviest. A two second GIF can easily reach 2 MB, while the same clip as MP4 is often under 200 KB.
How to add each format to your site
MP4 or WebM: the best all-rounder
Use a video tag, not an image tag. The four attributes in this snippet matter: autoplay starts it, muted is required for autoplay to work in every browser, loop repeats it, and playsinline stops iPhones opening it full screen.
<video autoplay muted loop playsinline width="320" height="180"
poster="/images/logo-still.png" aria-label="Acme logo">
<source src="/images/logo.webm" type="video/webm">
<source src="/images/logo.mp4" type="video/mp4">
</video>The poster image shows while the video loads, so the space never sits empty. Set the width and height so the page doesn't jump when it arrives.
Need the logo to float over a photo or a coloured header? MP4 can't store transparency. Export a transparent WebM from the 3D logo spin maker instead. It keeps a real alpha channel, which Chrome and Edge show as see-through. Safari shows it on black, so add the MP4 as a fallback.
Lottie: sharp at any size, tiny file
Lottie is a vector animation saved as a JSON file. It stays crisp on a 4K screen and on a phone, and a simple logo animation is often 20 to 60 KB. It's what most apps use for splash screens.
To export one, animate an SVG logo in SVG Editor Pro and choose Lottie JSON. Then add the free lottie-web player to your page:
<div id="logo" style="width:240px;height:80px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.getElementById('logo'),
renderer: 'svg',
loop: false,
autoplay: true,
path: '/images/logo.json'
});
</script>Set loop: false for a header logo. It plays once, settles, and stops asking for attention.
GIF: when you can't use anything else
Some website builders and email tools only accept images. In that case a GIF is fine:
<img src="/images/logo.gif" width="320" height="180" alt="Acme logo">Keep it short and small. Two to three seconds, no more than about 400 px wide, and as few colours as the design allows. Our GIF compressor can cut the file down if it's too heavy.
Where an animated logo works on a site
- The hero section. A logo reveal that plays once when the page opens. This is where an MP4 earns its place.
- The header. A small Lottie that draws itself in, then stays still. Never loop a header logo forever.
- The loading or splash screen. A short loop that covers the wait while the app or page loads. Lottie is the usual choice in iOS and Android apps.
- The 404 page and empty states. A playful moment where people expect less, so a little motion goes further.
- The favicon? No. Browsers don't animate favicons reliably. Keep that one static.
Five rules so it doesn't hurt the page
- Play once in the header, loop only in the hero. Endless motion next to text makes it harder to read.
- Keep it under 3 seconds. People scroll. A long reveal means most visitors never see the finished logo.
- Make the first frame look finished. If the video is slow to start, a blank first frame looks like a broken page. A poster image fixes this.
- Respect reduced motion. Some visitors turn animation off in their system settings. Show them the still logo:
@media (prefers-reduced-motion: reduce) { .logo-video { display: none; } .logo-still { display: block; } } - Check the weight. Aim for under 300 KB for a hero video and under 100 KB for anything in the header.
How to make the animated logo itself
You don't need After Effects. In the free logo animator:
- Upload your logo as a PNG with a transparent background or an SVG.
- Pick an effect. For a website, the calmer reveals and draw-ons work better than the bouncy ones.
- Export an MP4 for the hero, or a GIF if your site builder only takes images.
Want depth? The 3D logo animator turns the same file into a spinning chrome, gold or glass logo. For a full intro with music, the Logo Intro Maker has 200+ templates. Every export is free of watermarks, and you can preview everything without signing up.
Frequently asked questions
Will an animated logo slow down my website?
Not if you use MP4 or Lottie and keep it short. A 200 KB video loads faster than most hero photos. Large GIFs are the ones that cause trouble.
Can an animated logo have a transparent background on a website?
Yes, with a transparent WebM or a Lottie file. MP4 can't store transparency, and GIF transparency has rough, jagged edges.
Does an animated logo work in WordPress, Wix or Squarespace?
Yes. All three accept MP4 video blocks and GIF images. For Lottie, WordPress has free Lottie plugins, and Webflow supports Lottie natively.
What's the best format for an app splash screen?
Lottie. It's tiny, sharp on every screen size, and there are official players for iOS, Android and React Native.
