Ein professionelles Logo muss in völlig unterschiedlichen Kontexten funktionieren: klein im Browser-Tab als Favicon, mittel im Header der Website, groß auf einer Fassadenplane, quadratisch im Instagram-Profilbild und horizontal auf der Visitenkarte. Jeder dieser Kontexte hat unterschiedliche Abmessungen und Formate — und die falsche Größe zu verwenden führt zu einem unscharfen, abgeschnittenen oder verzerrten Logo.
Die gute Nachricht: Du musst nicht für jeden Kontext eine eigene Version von Grund auf erstellen. Mit der richtigen Datei im richtigen Format passt der Bildgrößen-Ändern von ImageTools die Abmessungen in Sekunden für jede Nutzung an.
Die Formate, die du von deinem Logo brauchst
Bevor wir über spezifische Größen sprechen, verstehe, welche Dateiformate du aufbewahren musst. Ein gut dokumentiertes Logo sollte mindestens diese Versionen haben:
- SVG (vektoriell): die Masterdatei. Kann auf jede Größe vergrößert werden — von einem 16px-Favicon bis zu einer 10-Meter-Werbetafel — ohne Qualitätsverlust. Essenziell für Websites, Präsentationen und den Versand an Druckereien.
- PNG mit transparentem Hintergrund (hohe Auflösung): für digitale Nutzung, wo SVG nicht akzeptiert wird. Speichere mit mindestens 1000×1000px für Flexibilität bei der Größenänderung.
- PNG mit weißem Hintergrund: für Kontexte, wo Transparenz nicht gewünscht oder unterstützt wird — Registrierungsformulare auf Plattformen, Word-Dokumente, E-Mail.
- PNG oder JPG in dunkler Version (Elemente in Weiß): für die Nutzung auf farbigen oder dunklen Hintergründen. Ein dunkelblaues Logo verschwindet komplett auf schwarzem Hintergrund.
- Favicon (.ico + PNGs): spezifische Versionen für den Browser-Tab. Nutze den Favicon-Generator von ImageTools, um alle benötigten Größen aus dem Logo zu generieren.
☁️ Bewahre alles in der Cloud auf. Halte diese Versionen in einem Google Drive oder Dropbox mit einfachem Zugriff bereit. Du wirst sie brauchen, wenn du einen freiberuflichen Designer beauftragst, das Profil eines sozialen Netzwerks aktualisierst oder Material an eine Druckerei sendest — oft mit Dringlichkeit.
Referenztabelle — Logo-Abmessungen nach Kontext
| Kontext | Empfohlene Abmessungen | Ideales Format | Anmerkung |
|---|---|---|---|
| Website-Header (Desktop) | 200–400px Breite | SVG oder transparentes PNG | Höhe proportional zum Layout |
| Favicon (Browser-Tab) | 16×16, 32×32, 48×48px | .ico + PNG | Nutze den Favicon-Generator |
| Apple Touch Icon (iOS) | 180×180px | PNG ohne Transparenz | Durchgehender Hintergrund empfohlen |
| Android-App-Icon (PWA) | 192×192 und 512×512px | PNG | Im Webmanifest verlangt |
| Instagram — Profilbild | 320×320px (angezeigt bei 110px) | PNG oder JPG | Wird kreisförmig zugeschnitten |
| Facebook — Profilbild | 170×170px | PNG oder JPG | Kreisförmig auf Desktop angezeigt |
| Facebook — Titelbild | 820×312px | JPG oder PNG | Logo als Element, nicht das ganze Bild |
| LinkedIn — Firmenlogo | 300×300px | PNG oder JPG | Min. 300×300, max. 4 MB |
| LinkedIn — Firmentitelbild | 1128×191px | PNG oder JPG | Logo als Element im Titelbild |
| YouTube — Kanal-Icon | 800×800px | PNG oder JPG | Kreisförmig angezeigt, 98px auf TV |
| YouTube — Kanalkunst | 2560×1440px | JPG oder PNG | Logo als Element, Safe Area: 1546×423px |
| WhatsApp Business — Profil | 640×640px | PNG oder JPG | Kreisförmig angezeigt |
| TikTok — Profilbild | 200×200px (min.) | JPG oder PNG | Kreisförmig angezeigt |
| Twitter / X — Profilbild | 400×400px | PNG oder JPG | Kreisförmig angezeigt, 48px im Feed |
| E-Mail (Signatur) | 200–300px Breite | PNG mit weißem Hintergrund oder JPG | Transparenz bei älteren Clients vermeiden |
| Visitenkarte (digital) | 400–600px Breite | Transparentes PNG | Für die Komposition im Kartenlayout |
| Präsentation (Folien) | 200–400px Breite | Transparentes PNG oder SVG | Proportional zur Folie (16:9) |
Logo für die Website
Header
Im Website-Header hat das Logo meist zwischen 150px und 400px Breite, mit proportionaler Höhe. Die genaue Breite hängt vom Layout ab — ein kompakter Header kann 150px nutzen, während eine Website mit viel Platz 300–400px nutzen kann. Am wichtigsten ist, dass das Logo auf Retina-Displays scharf ist: exportiere als PNG mit der doppelten Anzeigebreite (oder nutze SVG, das dies automatisch löst) und überlasse CSS die Steuerung der Anzeigegröße.
Nutze im Header immer SVG oder PNG mit transparentem Hintergrund — der Hintergrund des Headers ändert sich je nach Design und Scroll, und ein Logo mit weißem Hintergrund erzeugt ein sichtbares weißes Rechteck auf farbigen Hintergründen.
Favicon
Das Favicon ist das im Browser-Tab, in Lesezeichen und auf dem Startbildschirm mobiler Geräte angezeigte Icon. Ein effizientes Favicon ist eine vereinfachte Version des Logos — meist nur das Symbol oder der Anfangsbuchstabe, ohne den vollständigen Firmennamen, da der Platz zu klein für lesbaren Text ist.
Die benötigten Größen sind: 16×16px und 32×32px für Desktop-Browser, 180×180px für iOS (Apple Touch Icon) und 192×192px sowie 512×512px für Android und PWAs. Nutze den Favicon-Generator von ImageTools, um all diese Größen automatisch aus dem Logo zu generieren.
Generiere alle Favicon-Größen auf einmal
Vom Logo zum Favicon für Browser, iOS, Android und PWA — alle benötigten Größen in Sekunden.
Favicon kostenlos generierenLogo für soziale Medien
Warum das Logo in quadratischem und kreisförmigem Format funktionieren muss
Praktisch alle sozialen Netzwerke zeigen das Profilbild in Kreisform an. Das schafft eine spezifische Herausforderung für horizontale Logos (Name + Icon nebeneinander): im kreisförmigen Raum wird das Logo entweder zu klein, um lesbar zu sein, oder Teile davon werden an den Rändern abgeschnitten.
Die effizienteste Lösung ist, eine "Icon"-Version des Logos zu haben — nur das Symbol oder die Initialen der Marke, zentriert in einem quadratischen Bereich — speziell für die Nutzung als Profilbild in sozialen Medien. Diese Version bewahrt die visuelle Wiedererkennung ohne die Zuschnittsprobleme.
Instagram akzeptiert Profilbilder bis zu 320×320px, zeigt sie aber nur mit 110px im Profil und 32px im Feed an. Die Datei muss quadratisch sein. Wenn das Logo horizontal ist, zentriere es in einem quadratischen Bereich mit ausreichendem Padding, damit nichts vom kreisförmigen Zuschnitt der Plattform abgeschnitten wird.
Das Seiten-Profilbild bei Facebook wird mit 170×170px auf Desktop und 128×128px auf Mobilgeräten angezeigt, immer kreisförmig zugeschnitten. Das Titelbild ist 820×312px — dort erscheint das Logo meist als Element des Titelbild-Designs, nicht als das gesamte Bild.
Für Firmenprofile zeigt LinkedIn das Logo mit 300×300px (quadratisch) auf der Seite und in kleineren Größen in Listen an. Das ist einer der Kontexte, in denen die Bildqualität die berufliche Wahrnehmung am stärksten beeinflusst — nutze hochwertiges PNG ohne übermäßige Komprimierung.
YouTube
Das Kanal-Icon bei YouTube wird je nach Kontext in sehr unterschiedlichen Größen angezeigt: 98px auf einem Smart-TV, 32px im Desktop-Feed, 88px im mobilen Profil. Die Datei sollte mindestens 800×800px haben, um all diese Größen scharf abzudecken. Die Kanalkunst (Banner) hat Abmessungen von 2560×1440px, aber die "Safe Area" — der auf allen Geräten sichtbare Bereich — beträgt nur 1546×423px zentriert. Das Logo muss innerhalb dieses Bereichs bleiben.
WhatsApp Business
Das Profilbild von WhatsApp Business wird kreisförmig angezeigt, mit einer Anzeigegröße von etwa 50px in Gesprächen. Nutze eine Datei mit 640×640px, um Schärfe bei Vollbild-Vorschauen zu garantieren. Wie bei anderen sozialen Netzwerken funktionieren horizontale Logos hier nicht gut — nutze die Icon- oder Symbolversion der Marke.
📐 Tipp für horizontale Logos in sozialen Medien: erstelle eine quadratische Version, indem du weißen Raum (oder die Hintergrundfarbe der Marke) an den Seiten hinzufügst. Das ideale Verhältnis ist, dass das Logo 60% bis 75% der Breite des Quadrats einnimmt, mit gleichen Rändern auf allen vier Seiten. Das vermeidet den kreisförmigen Zuschnitt und garantiert, dass das Logo vollständig erscheint.
Logo für den Druck
Druck folgt einer völlig anderen Logik als digital. Die Pixelauflösung ist nicht das, was zählt — was zählt, ist das Verhältnis zwischen Pixeln und der physischen Druckgröße, gemessen in DPI (dots per inch, Punkte pro Zoll). Der Standard der Druckindustrie ist 300 DPI.
Wie man die benötigten Pixel für den Druck berechnet
Formel: Pixel = Größe in cm ÷ 2,54 × DPI
Praktische Beispiele:
| Material | Typische Logo-Größe | Benötigte Pixel (300 DPI) |
|---|---|---|
| Visitenkarte (Logo) | 3 × 1,5 cm | 354 × 177px |
| Briefpapier (Kopf) | 5 × 2 cm | 591 × 236px |
| Kleine Verpackung | 4 × 4 cm | 472 × 472px |
| T-Shirt (Brust) | 10 × 5 cm | 1181 × 591px |
| Tasse (seitliches Logo) | 8 × 4 cm | 945 × 472px |
| Individuelle Tasche | 15 × 8 cm | 1772 × 945px |
| Banner/Rollup (Logo oben) | 20 × 10 cm | 2362 × 1181px |
Um die fallweise Berechnung zu vermeiden, ist die praktischste Lösung, SVG zu nutzen — das Vektorformat skaliert ohne Limit und kann in jeder Größe ohne Qualitätsverlust gedruckt werden. Jede professionelle Druckerei akzeptiert SVG (oder das entsprechende Vektor-PDF, erzeugt aus dem SVG in Illustrator oder Inkscape).
Von Druckereien akzeptierte Formate
Die meisten professionellen Druckereien akzeptieren und bevorzugen:
- Vektor-PDF: der Industriestandard. Erzeugt aus Illustrator, Corel oder Inkscape mit dem Logo als Vektor.
- AI (Adobe Illustrator): native Vektordatei.
- EPS: älteres Vektorformat, weithin kompatibel.
- SVG: von den meisten modernen Druckereien akzeptiert.
- PNG in hoher Auflösung: akzeptiert, wenn die Vektordatei nicht verfügbar ist, solange die Auflösung für die Druckgröße ausreicht.
🖨️ Für Stickereien und Laserschnitt: diese Prozesse erfordern Vektoren mit sauberen Pfaden. Logos mit Verläufen, Schatten oder fotografischen Effekten müssen vor der Produktion vereinfacht werden. Ein Designer kann diese "Vektorisierung" aus dem PNG des Logos vornehmen, falls die ursprüngliche Vektordatei nicht existiert.
Das Logo für jede Nutzung in der Größe ändern
Mit der Basis-Logo-Datei als hochauflösendes PNG (mindestens 1000×1000px) oder SVG, nutze den Bildgrößen-Ändern von ImageTools, um an die Abmessungen jeder Plattform anzupassen. Der Größenänderer ermöglicht es, exakte Breite und Höhe in Pixel festzulegen, bei erhaltenem oder angepasstem ursprünglichem Seitenverhältnis.
Empfohlener Ablauf zur Vorbereitung der Logo-Versionen:
- Gehe immer von der verfügbaren Datei mit der höchsten Auflösung aus — SVG oder PNG über 1000px.
- Ändere die Größe auf die Zielabmessungen mit dem Größenänderer.
- Komprimiere für soziale Medien leicht mit dem Bild-Komprimierer — bei 85–90% Qualität, um Schärfe nicht zu verlieren.
- Sende für den Druck das SVG direkt oder konvertiere zu Vektor-PDF.
Ändere die Logo-Größe für jede Nutzung
Passe die Logo-Abmessungen in Pixel präzise an — ohne das Seitenverhältnis zu verzerren.
Logo kostenlos in der Größe ändernHäufige Fehler bei der Nutzung des Logos in verschiedenen Größen
Dieselbe Datei für alle Kontexte verwenden
Ein 2000px-Logo in der E-Mail-Signatur lädt langsam und erscheint riesig. Ein 100px-Logo in einem A4-Druck wird verpixelt. Jeder Kontext hat seine eigenen idealen Abmessungen — nutze diesen Leitfaden als Referenz und ändere die Größe vor der Nutzung.
Keine Version für dunklen Hintergrund haben
Viele Logos werden anfangs in dunklen Farben auf hellem Hintergrund erstellt. Bei Posts mit schwarzem oder farbigem Hintergrund — üblich bei Instagram Stories und LinkedIn-Titelbildern — verschwindet das Logo einfach. Erstelle und speichere immer eine Version mit den Hauptelementen in Weiß oder heller Farbe.
Für soziale Medien ein zu großes PNG speichern
Ein 2000×2000px-PNG für das Instagram-Profilbild verbessert nicht die Anzeigequalität — Instagram komprimiert alles über der benötigten Größe. Sende in den idealen Abmessungen (320×320px) mit 90% Qualitätskomprimierung, um doppelte Komprimierung durch die Plattform zu vermeiden.
JPG für Logos mit transparentem Hintergrund verwenden
JPG unterstützt keine Transparenz — beim Speichern eines transparenten PNG-Logos als JPG wird der transparente Hintergrund durch Weiß ersetzt. Wenn das Logo einen transparenten Hintergrund braucht (um auf verschiedenen Hintergrundfarben verwendet zu werden), nutze immer PNG oder WebP.
Ein kleines PNG vergrößern statt das SVG zu nutzen
Wenn das Logo als SVG existiert, nutze immer das SVG als Basis für die Größenänderung — vergrößere niemals ein kleines PNG. Das Vergrößern von PNG erzeugt Pixelbildung, die ohne die ursprüngliche Vektordatei nicht korrigiert werden kann.
Noch kein Logo? Erstelle jetzt eins
Wenn du noch kein Logo hast oder eine professionelle Version erstellen möchtest, bietet ImageTools zwei Tools dafür: den Logo-Ersteller, wo du Icon, Farben und Typografie mit voller Kontrolle wählst, und den KI-Logo-Ersteller, wo du deine Marke beschreibst und die KI fertige Vektoroptionen zum Download generiert. Beide exportieren als SVG und PNG — die Formate, die du für alle in diesem Leitfaden beschriebenen Nutzungen brauchst.
Erstelle jetzt das Logo deiner Marke
Ergebnis in SVG und PNG mit transparentem Hintergrund — bereit für Website, soziale Medien und Druck.
Häufig gestellte Fragen
prefers-color-scheme oder das HTML-Tag <picture> mit media, um automatisch zwischen der hellen und dunklen Logo-Version zu wechseln, abhängig von der Systempräferenz des Nutzers — ohne jegliche Interaktion des Besuchers.