Zurück zum Blog

Twitter X Banner-Größe 2026: Maße-Leitfaden

Von MorganVeröffentlicht 28. April 202612 min Lesezeit

# Twitter / X Banner-Größe: Maße- und Designleitfaden 2026

Die Twitter-Banner-Größe im Jahr 2026 (jetzt X) beträgt 1500×500 Pixel mit einem Seitenverhältnis von 3:1. Die maximale Dateigröße ist 5 MB. JPG und PNG funktionieren beide. Das Profilfoto überlappt den Banner unten links — halte wichtige Inhalte also zentriert oder rechts. Dieser eine Absatz beantwortet die Suchanfrage.

Der Rest dieses Leitfadens zeigt dir, wie du einen Header gestaltest, der auf jedem Gerät scharf aussieht. X schneidet ihn auf Smartphones anders zu. Es verbirgt einen Teil hinter deinem Avatar. Und die alte Spezifikation 1024×512, die du online vielleicht noch findest, ist veraltet.

Schnell-Spezifikationen: jede X-Header-Maß, die du brauchst

Wenn du nur wegen der Zahlen hier bist — hier sind sie. Speichere diese Tabelle.

FlächePixelgrößeSeitenverhältnisMax. DateigrößeFormatHinweise zum Mobile-Crop
X (Twitter) Header-Banner1500×5003:15 MBJPG, PNGEtwa zentrale 1500×400 sind auf Smartphones sichtbar
Profilfoto400×4001:12 MBJPG, PNGRunde Maske, überlappt Banner unten links
In-Feed-Bild1200×67516:95 MBJPG, PNG, GIFAuf hohen Smartphones letterboxed
Card-Bild1200×6281.91:15 MBJPG, PNGWird für Link-Vorschauen genutzt

Ein paar Regeln gelten für jedes X-Bild:

  • Format: JPG oder PNG. GIF-Uploads funktionieren in Feed-Posts noch, aber animierte GIFs in Headern wurden im August 2024 deaktiviert — sie frieren auf dem ersten Frame ein.
  • Farbprofil: sRGB. CMYK-Dateien wirken im Web oft ausgewaschen.
  • DPI: 72 DPI ist okay. X rendert nach Pixeln, nicht nach Druckgröße.
  • Dateigröße: Halte deinen Banner möglichst unter 2 MB. Kleinere Dateien laden mobil schneller — und über 80 % des X-Traffics ist mobil.

Das Profilbild-Überlappungsproblem (was die meisten Templates verpassen)

Hier ist die Falle. Dein Banner ist 1500×500. Dein runder Avatar sitzt unten links darüber. Auf dem Desktop ist der Avatar etwa 200×200 Pixel groß, ungefähr 30 Pixel vom linken Rand entfernt verankert und überlappt die unteren ca. 130 Pixel des Banners.

Die meisten Templates ignorieren das. Sie platzieren ein Logo, einen Namen oder einen Call-to-Action genau dort, wo dein Avatar landen wird. Dann lädt der Nutzer hoch, aktualisiert — und die Hälfte des Designs ist hinter einem Kreis versteckt.

Die Lösung: Behandle die untere linke 220×220-Pixel-Zone als toten Bereich. Setze Text, Logos und wichtige Inhalte in das obere rechte Zwei-Drittel. Im nächsten Abschnitt findest du die genauen Zahlen.

Wenn du etwas bereits in den falschen Maßen entworfen hast, ist der einfachste Weg unser kostenloser Bild-Cropper. Lege die Datei rein, stelle das 3:1-Verhältnis ein und exportiere. Für plattformübergreifende Planung bereitet unser Social-Media-Bild-Resizer dieselbe Quelle in einem Durchgang für X, LinkedIn, Facebook und YouTube vor.

Safe Zones: Wo dein X-Banner abgeschnitten wird

Die „Safe Zone" ist der Pixelbereich, der auf jeder Bildschirmgröße zu sehen ist. Alles außerhalb kann zugeschnitten, hinter deinem Profilfoto verborgen oder von X-UI-Buttons überdeckt werden.

Für einen 1500×500 X-Header:

  • Avatar-Überlappungszone (vermeiden): ungefähr die unteren linken 220×220 Pixel. Auf Mobilgeräten wandert der Avatar nach unten in die Mitte unter den Banner, aber der Upload schneidet den unteren Rand trotzdem hinter ihm zu.
  • Action-Button-Überlappung (mobil): Der „Folgen"- oder „Profil bearbeiten"-Button sitzt auf Smartphones über der unteren rechten Ecke. Halte diesen 200×100-Pixel-Bereich ebenfalls frei.
  • Sicherer Rand oben: etwa 30 Pixel — X schneidet auf kleineren Laptops manchmal einen Hauch oben ab.
  • Sicherer Textbereich: die obere rechte 1100×280-Pixel-Box, leicht über der Mitte, ist auf jedem Gerät sichtbar.
Diagramm der X-Banner-Safe-Zone mit Avatar- und Action-Button-Überlappung
Diagramm der X-Banner-Safe-Zone mit Avatar- und Action-Button-Überlappung

Pro-Tipp: Wenn du in Canva oder Figma entwirfst, leg einen 220-Pixel-Kreis unten links als Hilfsebene ab. Füge ein 200×100-Rechteck unten rechts für den Button hinzu. Beides vor dem Export ausblenden. Dieser eine Trick spart Stunden an Überarbeitung.

Mobile vs. Desktop-Crop: Warum dein Banner auf einem Smartphone anders aussieht

X zeigt Banner auf verschiedenen Geräten unterschiedlich an. Das volle 3:1-Bild, das du hochlädst, ist nicht das, was jeder Betrachter sieht.

  • Desktop: Der volle 1500×500-Banner wird gezeigt. Avatar-Kreis ist unten links.
  • Mobil (iOS- und Android-Apps): X schneidet auf den meisten Smartphones etwa 50 Pixel oben und unten ab. Der sichtbare Bereich kommt eher 1500×400 nahe — näher an einem 3,75:1-Verhältnis. Der Avatar wandert nach unten in die Mitte unter den Banner.
  • Tablet: Der Crop hängt von der Ausrichtung ab. Erwarte etwas zwischen Desktop und Mobil.

Die Quintessenz: Entwirf mobile first. Halte deinen Hero-Text im zentralen 1500×400-Streifen. Setze unterstützende Grafiken in die äußeren 50-Pixel-Ränder, damit sie den Desktop füllen, ohne missionskritisch zu sein.

X-Banner-Vergleich: Mobile vs. Desktop-Crop nebeneinander
X-Banner-Vergleich: Mobile vs. Desktop-Crop nebeneinander

Schritt für Schritt: einen X-Banner gestalten, der überall funktioniert

Hier ist der Workflow, den wir für Kunden-Banner nutzen, die beim ersten Mal richtig sitzen.

1. Mit der richtigen Leinwand starten

Öffne Canva, Figma, Photoshop oder dein bevorzugtes Tool. Erstelle eine neue Datei mit genau 1500×500 Pixel, RGB-Farbe, 72 DPI. Starte nicht bei 1024×512 — das war die alte Spezifikation und skaliert hochskaliert verschwommen.

2. Safe-Zone-Hilfslinien hinzufügen

Lege diese Hilfsebenen über deine Leinwand:

  • Einen 220-Pixel-Kreis unten links (den Avatar)
  • Ein 200×100-Rechteck unten rechts (den mobilen Action-Button)
  • Eine 1500×400-Box vertikal zentriert (den mobil-sicheren Bereich)

Sperre sie. Blende sie vor dem Export aus. Halte alle wichtigen Inhalte innerhalb der 1500×400-Box und außerhalb der Avatar- und Button-Zonen.

3. Text oben rechts platzieren

Headlines, dein Tagline und CTA-Text gehören in das obere rechte Zwei-Drittel der Leinwand. Dieser Bereich ist auf jedem Gerät sichtbar und frei von jeder Überlagerung. Ziele auf mindestens 32 Pixel Schriftgröße. Alles Kleinere ist auf Mobilgeräten unleserlich.

4. Kontrastreiche Farben wählen

Die UI von X überlagert kleine Symbole und einen Folgen-Button auf deinem Banner. Designs mit niedrigem Kontrast verlieren diese Elemente. Wähle eine Hintergrund- und Textkombination mit mindestens einem Kontrastverhältnis von 4,5:1. Unser kostenloser Farbkontrast-Checker testet das in Sekunden.

5. Im richtigen Format exportieren

Speichere als PNG, wenn dein Design flache Farben, scharfe Kanten oder Text hat. Speichere als JPG, wenn es überwiegend ein Foto ist. Ziel ist unter 2 MB. Wenn deine Datei größer ist, jag sie zuerst durch unseren Bild-Kompressor — X akzeptiert bis zu 5 MB, komprimiert oberhalb von 2 MB jedoch aggressiv und senkt die Bildqualität.

6. Hochladen und auf drei Geräten prüfen

Lade über den Profil-Editor von X (Web oder App) hoch. Prüfe das Ergebnis dann auf:

  1. Einem Laptop oder Desktop-Browser
  2. Deinem Smartphone in der X-App
  3. Entweder einem Tablet oder einem anderen Smartphone im mobilen Web

Wenn ein Element abgeschnitten oder verborgen wird, kehr zum Design zurück und passe es an. Diese Drei-Geräte-Prüfung erwischt 95 % der Probleme.

ScreenSnap Pro
Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Datei-Spezifikationen: Format, Größe und der GIF-Sonderfall

Die offiziellen Upload-Limits von X für den Header-Banner:

  • Maximale Dateigröße: 5 MB
  • Akzeptierte Formate: JPG, PNG, GIF
  • Animierte GIFs: Seit August 2024 animieren animierte GIFs in Headern nicht mehr. Sie frieren auf dem ersten Frame ein. Verwende stattdessen ein statisches Bild.
  • Mindestauflösung: X akzeptiert auch kleinere Dateien, skaliert sie aber hoch. Die Qualität fällt unter 1500×500 schnell ab. Entwirf immer in der vollen Zielgröße.
  • Empfohlene Dateigröße: unter 2 MB, um den Kompressionsdurchgang von X zu vermeiden.

Ein häufiger Workflow-Stolperstein: Leute exportieren in 4K oder 8K, um das Design „zukunftssicher" zu machen. X skaliert es trotzdem herunter, gewonnen hast du also nur einen langsamen Upload. Bleib bei 1500×500 nativ.

Kostenlose X-Banner-Templates und Tools

Du brauchst keine vollwertige Designsuite, um einen sauberen Header zu liefern. Diese kostenlosen Templates und Tools decken die meisten Anwendungsfälle ab:

  • Canva X-Header-Templates — suche „Twitter Header" und wähle die Größe 1500×500.
  • Figma Community — suche „X Banner" oder „Twitter Header" für editierbare Wireframes mit Safe Zones.
  • Adobe Express — kostenlose Header-Templates mit eingebauten Avatar-Hilfslinien.

Wenn das Design steht, übernehmen unsere kostenlosen Workflow-Tools die Aufräumarbeit:

Häufige X-Banner-Fehler (und ihre Lösungen)

Nach dem Audit Tausender Profilseiten tauchen die gleichen Fehler immer wieder auf. Hier die Top fünf.

Infografik zu häufigen X-Banner-Designfehlern
Infografik zu häufigen X-Banner-Designfehlern

1. Text oder Logo hinter dem Profilfoto versteckt

Der Klassiker. Designer setzt das Markenzeichen „für die Balance" mittig links. Avatar landet darüber. Die Hälfte des Markenzeichens verschwindet.

Lösung: Halte wichtigen Text und Logos im oberen rechten Zwei-Drittel. Nutze beim Entwerfen einen Avatar-Hilfskreis in echter Größe.

2. Winziger Text, den auf Mobilgeräten niemand lesen kann

Sieht auf einem 27-Zoll-Monitor bei 200 % Zoom gut aus. Verschwindet auf einem Smartphone.

Lösung: Vorschau bei 100 % Zoom auf einem 13-Zoll-Bildschirm. Wenn du deinen Tagline in dieser Größe nicht lesen kannst, vergrößere die Schrift. Ziel sind 32 Pixel oder mehr.

3. Niedrig aufgelöster Upload

Leute laden ein 600-Pixel-breites JPG hoch und wundern sich, warum es unscharf aussieht. X skaliert es hoch, und das Skalieren erzeugt Unschärfe.

Lösung: Arbeite immer nativ in 1500×500. Wenn du nur eine kleinere Quelle hast, nutze unseren Bild-Resizer, um die Maße richtig hinzubekommen — akzeptiere aber, dass die Qualität leiden kann.

4. Entwerfen in der alten 1024×512-Spezifikation

Manche Templates und alte Tutorials beziehen sich noch auf 1024×512 — das war die Spezifikation, bevor X (damals Twitter) die Header-Maße aktualisierte. Wenn du sie jetzt nutzt, wird dein Banner gestreckt und wirkt weich.

Lösung: immer 1500×500. Wenn ein Template in anderen Maßen vorliegt, nutze es nicht.

5. Action-Button-Überlappung auf Mobilgeräten

Designer fokussieren sich auf die Avatar-Überlappung und vergessen den „Folgen"-Button. Auf Mobilgeräten überdeckt dieser Button die untere rechte Ecke. Wichtige CTAs dort werden verborgen.

Lösung: Halte einen 200×100-Pixel-Bereich in der unteren rechten Ecke für die mobile Button-Überlagerung frei.

Bei der Banner-Recherche wirst du wahrscheinlich Screenshots anderer Profile machen, um daraus ein Moodboard zu bauen. ScreenSnap Pro macht das schnell — Bereichsaufnahme greift nur den Banner-Bereich, das Annotation-Toolkit (15 Tools, darunter Pfeile, Unschärfe und Zähler) lässt dich Safe Zones direkt auf dem Screenshot markieren, und du kannst Entwürfe in einem angepinnten Overlay speichern, während du iterierst. Es läuft auf Mac und Windows, kommt mit 150+ Gradient-Hintergründen für eigene Assets und ist ein einmaliger Kauf für 29 $ — kein Abo. Nützlich, wenn du einen Banner und ein Profilfoto zusammen entwirfst und schnell testen willst, wie sie als Paar wirken.

Häufig gestellte Fragen

Wie groß ist der X-(Twitter-)Banner?

Der X-(Twitter-)Header-Banner ist 1500×500 Pixel mit einem Seitenverhältnis von 3:1. Die maximale Dateigröße ist 5 MB, akzeptierte Formate sind JPG und PNG. Halte wichtige Inhalte zentriert oder oben rechts, um die Profilbild-Überlappung zu vermeiden.

Hat sich die Twitter-Banner-Größe nach dem X-Rebranding geändert?

Nein. Die Header-Maße blieben nach dem Rebranding zu X im Jahr 2023 bei 1500×500. Die einzige große Änderung kam im August 2024, als X die Wiedergabe animierter GIFs in Headern deaktivierte. Sie frieren jetzt auf dem ersten Frame ein. Statisches JPG und PNG bleiben die empfohlenen Formate.

Warum ist der untere Teil meines X-Banners abgeschnitten?

Zwei Gründe. Erstens überlappt das runde Profilfoto den Banner unten links — etwa 220×220 Pixel. Zweitens schneidet X auf Mobilgeräten etwa 50 Pixel oben und unten vom sichtbaren Banner ab und zeigt eher 1500×400. Entwirf mit diesen Crops im Hinterkopf. Halte wichtige Inhalte oben in der Mitte und weg von der unteren linken Ecke.

Kann ich meinen X-Banner animieren?

Nicht mehr. X hat animierte Header im August 2024 deaktiviert. Du kannst weiterhin eine GIF-Datei hochladen, aber nur der erste Frame wird gezeigt. Für Bewegung in deinem Branding nutze stattdessen animierte GIFs in deinen Feed-Posts oder in einem angepinnten Tweet.

Was ist die X-Banner-Safe-Zone?

Die Safe Zone ist ungefähr der zentrale 1500×400-Pixel-Bereich, leicht über der Mitte. Vermeide die unteren linken 220×220 Pixel (Profilbild-Überlappung) und die unteren rechten 200×100 Pixel (mobiler Action-Button). Halte Text, Logos und Kerninhalte in diesem sicheren Bereich, um die Sichtbarkeit auf jedem Gerät zu gewährleisten.

In welcher Auflösung sollte ich exportieren?

Exportiere genau in 1500×500 Pixel als PNG (für Designs mit Text und flachen Farben) oder JPG (für fotolastige Designs). Skaliere nicht hoch — X wird höhere Auflösungen wieder herunterskalieren. Halte die Dateigröße unter 2 MB, um den Kompressionsdurchgang von X zu vermeiden.

Was ist der Unterschied zwischen den X-Profilfoto- und Banner-Größen?

Das X-Profilfoto ist 400×400 Pixel (1:1 quadratisch, dargestellt als Kreis). Der X-Header-Banner ist 1500×500 Pixel (3:1 Rechteck). Das Profilfoto sitzt auf dem Desktop unten links und auf Mobilgeräten unten in der Mitte über dem Banner — entwirf sie also als koordiniertes Paar.

Fazit

Die Kennzahlen sind einfach: 1500×500, 3:1, unter 5 MB, JPG oder PNG. Schwieriger ist die Safe Zone — die Avatar-Überlappung unten links, der Mobile-Crop und die Action-Button-Überlagerung sind das, was die meisten Designs scheitern lässt.

Entwirf in voller, nativer Größe von 1500×500. Halte wichtige Inhalte im oberen rechten Zwei-Drittel. Teste auf drei Geräten, bevor du es als fertig erklärst. Und wenn du Banner über X, LinkedIn und YouTube hinweg verwaltest, bereitet unser Social-Media-Bild-Resizer eine Quelle für jede Plattform auf.

Für mehr plattformübergreifende Größen hat unsere Social-Media-Bildgrößen-Spickzettel jede Maße, die du brauchst, an einem Ort. Wenn du auch eine LinkedIn-Präsenz pflegst, deckt unser LinkedIn-Banner-Größenleitfaden den persönlichen Banner mit 1584×396 und den Unternehmensseiten-Banner mit 1128×191 ab. Und für YouTube führt der YouTube-Banner-Größenleitfaden durch die 2560×1440-Channel-Art-Spezifikation.

Autor
Morgan

Morgan

Indie Developer

Indie developer, founder of ScreenSnap Pro. A decade of shipping consumer Mac apps and developer tools. Read full bio

@m_0_r_g_a_n_
ScreenSnap Pro — turn plain screenshots into polished visuals with backgrounds and annotations
Verfügbar fürmacOS&Windows

Lass jeden Screenshot pro aussehen.

ScreenSnap Pro verwandelt einfache Screenshots in polierte Visuals — Hintergründe, Annotationen, GIF-Aufnahme und sofortige Cloud-Links.

ScreenSnap Pro entdecken