Animiertes Logo: Welches Dateiformat? MP4, GIF, WebM oder Lottie

Das richtige Dateiformat für ein animiertes Logo hängt vom Einsatzort ab: MP4 für Video und Social Media, WebM mit MP4 als Ersatz für Websites, GIF für die E-Mail-Signatur, GIF oder animiertes WebP für Chats und reine Bild-Uploads. Lottie oder animiertes SVG brauchst du nur, wenn das Logo in einer App Vektor bleiben muss.

Die Dateiformate für animierte Logos fallen in drei Familien. Videoformate (MP4, WebM, MOV) brauchen einen Player. Animierte Bilder (GIF, animiertes WebP, APNG) laufen überall, wo ein Bild angezeigt wird. Vektorformate (Lottie, animiertes SVG) speichern Formen statt Pixel und bleiben deshalb in jeder Größe scharf.

Wir haben 21 Logo-Renders mit je vier Sekunden in alle fünf Download-Formate von MorphLogo exportiert und gewogen: Das GIF war jedes Mal größer als das MP4, aus dem es stammte.

Du hast ein Logo, aber noch keine Animation? Render eins und lade es als MP4, WebM, WebP, GIF oder Signatur-GIF herunter. Logo mit KI animieren →

Lade ein PNG, JPG, WebP oder SVG hoch. Generieren und eine 4-Sekunden-Vorschau in 480p mit Wasserzeichen sind kostenlos; jeder Download braucht ein Guthabenpaket oder Abo.

Welches Dateiformat ist das beste für ein animiertes Logo?

Das beste Format ist das, das der Zielort ohne Hilfe abspielt: E-Mail-Programme animieren GIFs, aber kein Video, und manche Upload-Formulare nehmen nur Bilder an. Die meisten landen bei einem MP4 für alles, was Video ist, einem GIF für die E-Mail und einem WebM, wenn das Logo auf eine Website kommt.

Wo das Logo hinkommt	Format	Warum
Website, Hero-Bereich oder Header	WebM, MP4 als Ersatz	In allen 21 Tests kleiner als unser MP4, WebP und GIF
E-Mail-Signatur	Signatur-GIF	Gmail und Outlook 2007–2019 für Windows spielen kein Video in E-Mails ab
Chats, Foren, Upload-Felder nur für Bilder	GIF oder, wo angenommen, animiertes WebP	Startet und wiederholt sich ohne Player
YouTube, Social Media, Werbung, Schnittprogramme	MP4	Der Original-Render, mit Ton, falls du ihn eingeschaltet hast
Präsentationen	MP4; GIF in Google Präsentationen	Microsoft empfiehlt für PowerPoint MP4 mit H.264; laut Apple läuft H.264 auf jedem Apple-Gerät; Google Präsentationen nimmt GIFs als Bild
App-Oberfläche, Ladeanimation, Hover-Effekt	Lottie oder animiertes SVG	Bleibt Vektor und per Code steuerbar
Logo einer LinkedIn-Unternehmensseite	Statisches PNG oder JPEG	LinkedIn nimmt für Seitenbilder nur PNG oder JPEG

Welches Format für den Videoschnitt?

Das MP4: Es ist der Render selbst, für schnelles Abspielen neu verpackt, aber nie neu komprimiert. H.264 steht auf der Liste der unterstützten Formate von Final Cut Pro, WebM nicht. Für ein 16:9-Intro renderst du gleich in 16:9 (MorphLogo kann auch 4:3, 1:1, 3:4 und 9:16), statt ein quadratisches Video zu beschneiden.

GIF oder MP4: Was ist für ein Logo besser?

MP4 überall, wo Video läuft, GIF nur dort, wo es nicht läuft. In unseren Tests war das GIF bei 21 von 21 Clips größer als das MP4 – obwohl es nur ein Viertel der Pixel und 15 statt 24 Bilder pro Sekunde mitbringt.

So haben wir gemessen. Am 19.09.2026 haben wir 21 quadratische Renders mit je vier Sekunden (960 × 960 px, 24 Bilder pro Sekunde; dieselben Clips wie auf unserer Seite Beispiele für Logo-Animationen) mit demselben Export-Dienst und denselben Einstellungen umgewandelt, die auch die Downloads unserer Nutzer erzeugen. Größen sind dezimal: 1 KB sind 1.000 Byte.

Das MP4 ist der Original-Render. Die anderen vier Formate entstehen beim Download daraus. Jedes tauscht Pixel, Bilder oder Farben gegen eine kleinere oder verträglichere Datei:

Format	Bildgröße und Bildrate	Farben	Schleife
MP4 (H.264)	Render-Größe (hier 960 px), 24 fps	Volle Farbe	Wenn der Player wiederholt
WebM (VP9)	Kurze Seite bis 1.080 px (hier 960 px), 24 fps	Volle Farbe	Wenn der Player wiederholt
Animiertes WebP	Kurze Seite bis 720 px, 24 fps	Volle Farbe	Endlos
GIF	Lange Seite 480 px, 15 fps	Bis zu 256 pro Bild	Endlos
Signatur-GIF	Lange Seite 240 px, 10 fps	64	Läuft einmal

Das Ergebnis in einem Satz: Das WebM war im Median ein Viertel so groß wie das MP4, das GIF fast doppelt so groß.

Format	Mittlere Größe (Median)	Spanne über 21 Clips	Größe im Vergleich zum MP4 (Median)
MP4	2,00 MB	1,36–2,94 MB	1×
WebM	496 KB	55 KB–1,60 MB	0,25×
Animiertes WebP	984 KB	416 KB–1,77 MB	0,44×
GIF	3,65 MB	2,5–6,4 MB	1,86×
Signatur-GIF	509 KB	343–862 KB	0,26×

Nur MP4 und WebM tragen Ton, und auch nur, wenn du ihn eingeschaltet hast. Clips mit transparentem Hintergrund gibt es zusätzlich als MOV (ProRes 4444); dazu unten mehr.

Gleiches Bild, gleiche Stelle: MP4, WebM und WebP sind kaum zu unterscheiden. Das GIF streut Dither-Punkte in den Farbverlauf, und das Signatur-GIF zerfällt vergrößert in Blöcke – in Signaturgröße aber nicht.

Warum ist ein GIF größer als das Video, aus dem es stammt?

Ein GIF kann nur Pixel überspringen, die von einem Bild zum nächsten exakt gleich bleiben. Gerenderte Clips haben feines Rauschen im Hintergrund, also wird fast jedes Pixel in jedem Bild neu geschrieben. Dazu begrenzt die GIF89a-Spezifikation jedes Bild auf 256 Farben; Verläufe werden mit Dither-Punkten nachgeahmt, die sich schlecht komprimieren lassen. Videocodecs speichern dagegen nur, was sich ändert, und das in voller Farbe.

Googles Leitfaden auf web.dev misst sogar 3,7 MB GIF gegen 551 KB MP4, wandelt aber in GIF-Größe um. Unser MP4 ist doppelt so breit, und das GIF war trotzdem 1,2- bis 2,6-mal so groß.

In der E-Mail und überall, wo nur Bilder erlaubt sind, gewinnt das GIF trotzdem. Dafür erzeugt der GIF-Logo-Maker beide GIF-Größen aus einem Render.

Wo passt animiertes WebP?

Animiertes WebP liegt dazwischen: volle Farbe und Endlosschleife ohne Player, bei knapp der Hälfte der MP4-Größe. Aktuelle Versionen von Chrome, Edge, Firefox und Safari zeigen es an (Can I use); Gmail macht daraus ein stehendes JPEG (Can I email). Nimm es dort, wo eine Plattform Bilder annimmt, aber kein Video.

Wann brauchst du Lottie oder eine SVG-Animation?

Nur wenn das Logo Vektor bleiben muss: scharf in jeder Größe, per Code gesteuert oder als Reaktion auf Klicks und Scrollen in einer Website oder App.

Lottie ist ein offenes Vektor-Animationsformat, das Hernan Torrisi 2015 entwickelt hat, um After-Effects-Animationen zu exportieren; die Datei ist JSON und wird klassisch mit dem Plug-in Bodymovin exportiert. Ein animiertes SVG ist eine SVG-Datei (Scalable Vector Graphics), die mit CSS oder SMIL bewegt wird. Beide speichern Formen und Keyframes, keine Pixel.

Darin liegt auch die Grenze: Beide müssen aus Vektorgrafik gebaut werden, etwa aus einer SVG- oder Illustrator-Datei. Ein gerendertes Video mit Partikeln oder Lichtreflexen lässt sich nicht in Vektorformen zurückverwandeln.

MorphLogo exportiert weder Lottie noch animiertes SVG, sondern rendert Video. Für Vektor-Bewegung nimmst du ein Vektor-Tool wie LottieFiles, Lottielab oder SVGator oder After Effects mit Bodymovin. Für Hero-Banner, Intro oder Post ist Video einfacher und zeigt Effekte, für die Vektorformate nicht gebaut sind.

Kann ein animiertes Logo einen transparenten Hintergrund haben?

Ja, wenn das Format einen Alphakanal hat, also für jedes Pixel einen Transparenzwert. Animiertes WebP, APNG, WebM mit VP9-Alpha, HEVC mit Alpha und MOV mit ProRes 4444 haben einen; ein GIF kann ein Pixel nur ganz durchsichtig oder ganz deckend machen.

Format	Transparenz	Wo es funktioniert
GIF	Eine Farbe ganz durchsichtig, der Rest deckend (GIF89a)	Überall, mit Säumen oder gezackten Kanten
APNG	Voller Alphakanal	Aktuelle Browser; nicht Gmail im Web und auf Android
Animiertes WebP	Voller Alphakanal	Aktuelle Browser; Gmail macht daraus ein stehendes JPEG
WebM (VP9 mit Alpha)	Voller Alphakanal	Chrome, Edge und Firefox; Safari ignoriert den Alphakanal
HEVC mit Alpha	Voller Alphakanal	Safari ab iOS 13 und macOS Catalina
MOV (ProRes 4444)	Voller Alphakanal, bis 16 Bit	Schnittprogramme; rund 330 Mbit/s bei 1080p, zu schwer für die Auslieferung
PNG-Sequenz	Voller Alphakanal, ein PNG pro Bild	Motion-Design- und Compositing-Programme (Apple Motion exportiert sie); ein Ordner voller Einzelbilder, keine Web-Datei

Transparentes Video auf einer Website braucht also zwei Dateien: ein VP9-WebM mit Alpha für die meisten Browser und eine HEVC-Datei mit Alpha für Safari.

Was MorphLogo dabei kann. Ein transparenter Hintergrund ist eine bezahlte Option. Schaltest du vor dem Generieren „Transparenter Hintergrund“ ein, entsteht der Clip vor einem Greenscreen, und beim Download als WebM, WebP, GIF oder MOV (ProRes 4444) wird das Grün herausgerechnet; das MP4 behält den Greenscreen. Dafür gelten ein paar Bedingungen:

• Die Logo-Datei braucht selbst einen transparenten Hintergrund (PNG oder SVG). Ein Logo auf einer Farbfläche oder ein JPEG wird abgelehnt.
• Nur vier Stile – 360°-Drehung, Sanftes Schweben, Bounce-Pop und Konfetti-Pop – oder deine eigene Beschreibung.
• Glühen rund um das Logo geht verloren, weil es beim Freistellen mit dem Grün herausfällt.
• Im GIF sind die Kanten hart, denn das Format kennt nur ganz durchsichtig oder ganz deckend. Für weiche Kanten nimm WebM, WebP oder MOV.

Ein HEVC mit Alpha für Safari, APNG, PNG-Sequenzen und bearbeitbare Projektdateien gibt es nicht. Ohne die Option sind alle Downloads deckend; dann hilft Folgendes:

• Lade das Logo auf dem Hintergrund hoch, auf dem es später steht. Der Render startet mit der Farbe in den Ecken deiner Datei; ein transparentes PNG bekommt ohne die Option einen fast weißen Studioton, und reines Weiß kam in unserem Test als #F9F9FC zurück.
• Wähle einen Stil, der mit deinem Logo beginnt. Diese Stile halten den Hintergrund auf eine Nuance genau; Reveal-Stile wie Partikel-Aufbau oder Glitch-Burst können die Szene neu beleuchten.

Wie groß sollte die Datei eines animierten Logos sein?

Ein Signatur-GIF bleibt unter 500 KB (manche Anbieter von Signatur-Software nennen 200 KB), ein Clip für die Website so leicht, wie seine Bewegung es zulässt. In unseren Tests kam ein vier Sekunden langes, quadratisches Logo als WebM auf 55 KB–1,60 MB und als Signatur-GIF auf 343–862 KB.

Für die E-Mail-Signatur

Weder Gmail noch Outlook nennen eine Obergrenze für GIFs. Für GIFs in E-Mails allgemein empfiehlt Litmus höchstens 1 MB; für animierte Signaturen rät der Anbieter WiseStamp zu weniger als 500 KB, Letsignit zu höchstens 200 KB. Unser Signatur-GIF (240 px, 10 fps, 64 Farben, läuft einmal) kam bei Stilen, die mit dem Logo beginnen, auf 384–402 KB: innerhalb der Grenze von WiseStamp, nicht der von Letsignit. Jede Datei über 500 KB hatte Bewegung über die ganze Fläche wie Partikel oder Zersplittern, und keine der 21 blieb unter 200 KB.

Über die Lesbarkeit entscheidet die Anzeigegröße, nicht das Format. Gmail zeigt Signaturbilder höchstens 100 px hoch, und in dieser Höhe ist die zweizeilige Unterzeile unseres Testlogos in jedem Format ein bis zwei Pixel hoch, während das Icon sichtbar bleibt:

Element	Im 960-px-MP4	In einer 100 px hohen Signatur
Rauten-Icon	158 px	etwa 16 px
Schriftzug VERTEX	58 px	etwa 6 px
PRECISION TOOLING CO.	20 px	etwa 2 px
EST. 1998 · SINCE THEN	12 px	etwa 1 px

Beschränk die Signatur-Version auf Icon oder Schriftzug und setz die Unterzeile als Text darunter. Outlook für Windows 2007–2019 zeigt nur das erste Bild, also wähle einen Stil, der mit deinem Logo beginnt. Die Schritte für Outlook, Gmail und Apple Mail stehen in unserer Anleitung zum Signatur-GIF.

Für die Website

Auf einer Webseite ist Dateigröße Ladezeit, und die Bewegung bestimmt sie. Stile, bei denen das Logo ganz bleibt, kamen als WebM auf 111–143 KB, Skizzen-Reveals auf 87 KB im Median; Bewegung über die ganze Fläche wie Partikel oder Flüssigkeit auf 615 KB im Median, bis 1,60 MB. Längere Clips und 1080p oder 4K vergrößern MP4 und WebM; WebP bleibt bei 720 px, die GIFs bei 480 und 240 px gedeckelt.

Wie bindest du ein animiertes Logo in die Website ein?

In ein stummgeschaltetes, wiederholendes HTML-<video>-Element: das WebM zuerst, das MP4 als Ersatz und deine Original-Logodatei als Vorschaubild.

<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>

Jedes Attribut hat eine Aufgabe; fehlt eins, friert das Logo ein, springt in den Vollbildmodus oder lädt die größere Datei.

• muted mit autoplay: Chrome erlaubt stummes Autoplay immer, und WebKit lässt stumme Videos auf iOS automatisch starten.
• playsinline: hält die Wiedergabe auf dem iPhone in der Seite statt im Vollbild.
• loop: springt am Ende zurück zum Anfang (MDN).
• WebM zuerst: Steht das MP4 vorn, gewinnt es auch dort, wo das kleinere WebM funktionieren würde.
• poster: wird angezeigt, bis das Video geladen ist. Nimm deine Logodatei: Stile, die mit dem Logo beginnen, starten darauf, und jeder Stil wird so gesteuert, dass er am Ende darauf landet.

Für den Hero-Bereich kein GIF: Unsere GIFs waren im Median achtmal so groß wie das WebM, mit weniger Farben und Bildern.

Zwei Prüfungen vor dem Livegang:

• Gib einer Schleife einen Pause-Knopf. WCAG 2.2, Erfolgskriterium 2.2.2 verlangt eine Pausenmöglichkeit für Bewegung, die von selbst startet und länger als fünf Sekunden läuft – eine Schleife tut das. Ergänze einen Pause-Knopf oder controls, oder lass loop weg.
• Achte auf die Nahtstelle. Bei 89 aktuellen Renders schloss der 3D-Orbit die Schleife in 12 von 19 Fällen sauber, die 360°-Drehung hinterließ meist einen leichten Sprung, und das Filmische Reveal blitzte jedes Mal auf, weil es heller endet, als es beginnt. Die Seite Logo-Animation in Endlosschleife hat die Tabelle für jeden Stil.

Dateiformat für animierte Logos: Häufige Fragen

Welches Dateiformat für ein Logo?

Für das statische Logo: SVG, EPS oder PDF als Vektor-Original für Druck und beliebige Größen, PNG für alles Digitale, weil es verlustfrei komprimiert und Transparenz kann. JPEG hat keinen Alphakanal. Für die Animation gilt die Tabelle oben: MP4, WebM, GIF oder WebP je nach Einsatzort, Lottie nur für Vektor-Bewegung in Apps.

Kann eine SVG-Datei animiert sein?

Ja. SVG-Formen lassen sich mit CSS oder SMIL-Elementen wie <animate> bewegen, und Browser spielen das ohne Video-Player ab. Die Bewegung muss auf den Vektorformen aufgebaut sein; ein gerendertes Video lässt sich nicht in Vektorformen zurückverwandeln. MorphLogo nimmt SVG als Upload an, wandelt es im Browser in ein PNG um und liefert Video.

Was ist eine .lottie-Datei?

Eine .lottie-Datei ist eine dotLottie-Datei: ein komprimiertes Archiv, das eine oder mehrere Lottie-Animationen samt ihren Assets bündelt. Die Animation darin ist weiterhin Lottie-JSON, ergänzt um Extras wie Themes und State Machines für interaktive Bewegung.

Kann ein PNG animiert sein?

Ja, als APNG (Animated PNG). Es funktioniert wie ein animiertes GIF, unterstützt aber 24-Bit-Farbe und vollen Alphakanal; aktuelle Versionen von Chrome, Edge, Firefox und Safari spielen es ab. Wo APNG nicht unterstützt wird, erscheint nur das erste Bild – auch in Gmail im Web und auf Android.

Kann ich mein animiertes Logo kostenlos herunterladen?

Nein. Bei MorphLogo kostet jeder Download Geld, weil jeder Render über ein kostenpflichtiges KI-Videomodell läuft: Guthabenpakete ab 9,90 US-$ einmalig oder ein Abo für 19 US-$ im Monat (Preise). Kostenlos ist eine 4-Sekunden-Vorschau in 480p mit Wasserzeichen, die du im Browser ansiehst. Was eine Logo-Animation auf den verschiedenen Wegen kostet, steht in unserem Beitrag zu den Kosten einer Logo-Animation.