# Logogrößen für Websites, Social Media und Druck

[Canonical HTML page](https://gradiently.design/de/guide/logo-sizes)

Leute fragen nach der richtigen Logogröße, als gäbe es eine Zahl. Gibt es nicht: Es gibt eine Masterdatei und eine sinnvolle Größe für jeden Ort, an dem sie landet. Hier sind diese Orte, mit den Formaten und den Dateien, die du nutzt.

## The short version

- Es gibt nicht die eine richtige Logogröße; behalte eine Vektor-Masterdatei und exportiere daraus für jeden Ort, an dem das Logo erscheint.
- Nutze auf Websites ein SVG-Logo und leg seine Größe in CSS über die Höhe fest, damit es auf jedem Bildschirm scharf bleibt.
- Lade für Profilbilder in Social Media ein quadratisches Bild hoch und halte das Logo deutlich innerhalb der Mitte, weil die meisten Plattformen Profilbilder kreisrund beschneiden.
- Exportierst du ein PNG-Logo, mach es mindestens doppelt so groß wie die Anzeigegröße, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt.
- Für den Druck nutzt du ein Vektor-PDF oder SVG oder eine Rasterdatei mit 300 dpi in der finalen Druckgröße.

Es gibt nicht die eine **Logogröße**, die überall funktioniert. Behalte dein Logo als Vektor-Master, ein SVG oder PDF, das sich ohne Unschärfe auf jede Größe skalieren lässt, und exportiere daraus für jeden Ort: ein über die Höhe bemessenes SVG für deinen Website-Header, eine quadratische Version für Profilbilder, eine horizontale Version für Banner und eine Datei mit 300 dpi für den Druck. Was sich von Ort zu Ort ändert, ist die Fläche und wie viel davon das Logo füllen sollte.

## Beginne mit einer Masterdatei, nicht mit einer Größe

Vektordateien beschreiben Formen statt Pixel, dieselbe Datei ist also auf dem Handy und an der Ladenfront scharf. Jede andere Datei, die du erstellst, sollte aus diesem Master exportiert werden, nie aus einem Screenshot oder einem alten PNG. Hast du nur ein kleines Raster-Logo, lass es vor allem anderen als Vektor neu zeichnen; das erspart dir bei jedem späteren Auftrag Ärger.

| Datei | Typ | Einsatz |
| --- | --- | --- |
| SVG | Vektor | Websites, Apps und als Master für Bildschirmarbeit |
| PDF | Vektor | Druckereien, Beschilderung und alles, was an einen Lieferanten geht |
| PNG mit Transparenz | Raster | Präsentationen, Dokumente, Social-Media-Posts und E-Mail |
| JPG | Raster | Nur wo ein voller Hintergrund in Ordnung ist, nie für ein Logo auf Farbe |

Zwei Vektordateien und ein transparentes PNG decken fast jede Anfrage ab. [SVG oder PNG](https://gradiently.design/de/guide/svg-vs-png) erklärt die Abwägung ausführlicher.

## Logogröße für Websites

Bemiss das Logo auf einer Website über die Höhe, nicht die Breite, damit eine breite Wortmarke und ein kompaktes Symbol in deinem Header auf derselben Grundlinie sitzen. Nutze das SVG, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt, und gib ihm eine sinnvolle Maximalbreite für kleine Handys.

```html
<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>
```

Die Attribute width und height reservieren Platz, damit die Seite nicht springt, während das Logo lädt. Die Höhen hier sind ein Ausgangspunkt; pass sie an deinen Header an.

Dein Favicon ist eine eigene, quadratische, vereinfachte Datei, nicht das verkleinerte ganze Logo. Browser zeigen es in sehr kleinen Größen, deshalb wird es meist zu einem einzelnen Buchstaben oder Symbol. [Favicon-Design](https://gradiently.design/de/guide/favicon-design) listet die genauen Dateien, und Googles [Favicon-Richtlinien](https://support.google.com/webmasters/answer/9290858) verlangen ein quadratisches Icon in einem Vielfachen von 48 Pixeln.

## Logogröße für Social Media

Social-Media-Plattformen nutzen dein Logo an zwei sehr unterschiedlichen Orten: im kleinen Profilbild und im breiten Cover oder Banner. Sie brauchen unterschiedliche Versionen des Logos, nicht dieselbe Datei hineingequetscht.

### Profilbilder

- Lade ein **quadratisches** Bild hoch. Die meisten Plattformen beschneiden Profilbilder kreisrund, die Ecken verschwinden also.
- Nutze deine **Icon- oder gestapelte** Version, nicht eine lange horizontale Anordnung. Eine breite Wortmarke wird in einem kleinen Kreis unlesbar.
- Halte das Logo ungefähr in den **mittleren zwei Dritteln** des Quadrats, mit gleichmäßigem Abstand rundum.
- Setz es auf eine **Vollfarbe oder einen ruhigen Hintergrund**, der das Quadrat füllt, damit der Kreis gewollt aussieht.
- Prüf es in echter Größe auf deinem eigenen Handy, bevor du es überall änderst.

Ein quadratisches Profilbild mit der Wortmarke fern mittig auf einem grünen Verlauf, mit Platz rundum für einen kreisrunden Zuschnitt

Eine kurze Wortmarke, mittig mit großzügigen Rändern, übersteht den kreisrunden Zuschnitt.

Ein breites LinkedIn-Profilbanner mit den Wörtern Fern Studio und Pflanzen für kleine Räume auf demselben grünen Verlauf

Das Banner kann den vollen Namen und eine Zeile über dich tragen, weil es die Breite dafür hat.

### Cover und Banner

Coverbilder sind breit und werden auf Handys und Desktops unterschiedlich beschnitten, und das Profilbild überlappt oft eine Ecke. Halte Logo und Wörter nahe der Mitte und lass den Hintergrund bis an die Ränder laufen.

- Facebook-Cover 1640×624: 1640 × 624
- LinkedIn-Banner 1584×396: 1584 × 396
- X-Header 1500×500: 1500 × 500
- YouTube-Kanalbild 2560×1440: 2560 × 1440

Vier gängige Banner, maßstabsgetreu. Alle sind viel breiter als hoch, also passt ein horizontales Logo oder eine einfache Namenszeile am besten.

In Posts ist das Logo eine Signatur, nicht die Überschrift. Ein guter Ausgangspunkt ist, es klein zu halten, in einer festen Ecke, in derselben Größe auf jedem Post, sodass es Wiedererkennung aufbaut, ohne mit der Botschaft zu konkurrieren. [Bildgrößen für Social Media](https://gradiently.design/de/guide/social-media-image-sizes) hat jede Postgröße.

## Logogrößen für E-Mail und Druck

| Ort | Formatgröße | Logodatei |
| --- | --- | --- |
| E-Mail-Header | 1200×600 | PNG, in doppelter Anzeigegröße exportiert |
| E-Mail-Signatur | 600×200 | Kleines PNG; viele E-Mail-Apps blockieren SVG |
| Linkvorschau (Open Graph) | 1200×630 | Logo nahe der Mitte, PNG oder JPG |
| Visitenkarte | 1050×600 bei 300 dpi | Vektor-PDF aus dem Master |
| A5-Flyer | 1748×2480 bei 300 dpi | Vektor-PDF aus dem Master |
| A4-Poster | 2480×3508 bei 300 dpi | Vektor-PDF aus dem Master |

Druckgrößen sind in Pixeln bei 300 dpi angegeben. Vektorlogos drucken in jeder Größe scharf; Rasterlogos brauchen 300 dpi in der finalen Druckgröße.

E-Mail ist der unbequeme Fall: Viele E-Mail-Apps zeigen keine SVG-Bilder, also nutze ein transparentes PNG. Exportiere es in doppelter Breite der gewünschten Anzeige und leg die Anzeigebreite im HTML fest, damit es auf Handybildschirmen mit hoher Pixeldichte scharf bleibt. Lies für den Druck [Bildauflösung für den Druck](https://gradiently.design/de/guide/image-resolution-for-print), bevor du etwas an eine Druckerei schickst, und sieh dir [E-Mail-Signatur-Design](https://gradiently.design/de/guide/email-signature-design) für die Signatur selbst an.

> **In doppelter Anzeigegröße exportieren** Ein PNG, das 200 Pixel breit angezeigt wird, sollte mit 400 exportiert werden. Bildschirme mit hoher Pixeldichte packen zwei oder mehr Gerätepixel in jedes CSS-Pixel, und ein Logo, das genau in Anzeigegröße exportiert wurde, wirkt darauf weich.

## Jede Größe aus einem Design erstellen

Das Mühsame an Logogrößen ist nicht das Logo, sondern jedes Mal Cover, Post, Story und Karte drumherum neu aufzubauen. In Gradiently kannst du den Designer um die anderen Größen bitten oder mit Pro ein Design in einem Schritt auf jede Größe bringen, und dein Hintergrund wird in jeder Form frisch gerendert statt beschnitten. Eigene Größen reichen von 200 bis 8.000 Pixeln, wenn ein Lieferant etwas Ungewöhnliches verlangt. [Logo-Varianten](https://gradiently.design/de/guide/logo-variations) behandelt, welche Version des Logos in welches Format gehört.

## FAQ

### Welche Größe sollte ein Logo haben?

Es gibt nicht die eine Größe. Behalte eine Vektor-Masterdatei und exportiere für jeden Einsatz eine Version: SVG für Websites, ein quadratisches PNG für Profilbilder, breite Banner für Cover und Vektor-PDF für den Druck.

### Was ist die beste Logogröße für eine Website?

Nutze ein SVG und leg es in CSS über die Höhe fest, damit es auf jedem Bildschirm in deinen Header passt. Gib die Attribute width und height an, damit sich die Seite beim Laden nicht verschiebt.

### Welche Größe sollte mein Logo für Profilbilder in Social Media haben?

Lade ein quadratisches Bild hoch und halte das Logo in den mittleren zwei Dritteln, weil die meisten Plattformen Profilbilder kreisrund beschneiden. Nutze dein Icon oder gestapeltes Logo statt eines breiten.

### Welche Auflösung sollte ein Logo für den Druck haben?

Nutze ein Vektor-PDF oder SVG, das in jeder Größe scharf druckt. Hast du nur eine Rasterdatei, braucht sie 300 dpi in der finalen Druckgröße.

### Warum sieht mein Logo unscharf aus?

Wahrscheinlich wurde es in Anzeigegröße exportiert oder aus einer kleinen Datei hochskaliert. Exportiere PNGs in doppelter Anzeigegröße aus einem Vektor-Master oder nutze im Web SVG.