Logo-PNG-Größen für Websites, E-Mail und Kundenübergabe

Beginne mit der Platzierung

Es gibt keine PNG-Größe, die für jede Website, E-Mail-Signatur und Kundenpräsentation passt. Eine gute Übergabe erklärt dem Empfänger, welche Datei er verwenden und wie groß er sie anzeigen sollte.

Frage bei einer Website nach der gerenderten CSS-Größe des Logos bei den relevanten Layoutbreiten. Ein 200 Pixel breites Desktop-Header-Logo kann mobil kleiner sein. Prüfe bei E-Mail die Vorlage oder den Signatureditor, statt eine Website-Einstellung zu übernehmen. Vereinbare für Präsentationen eine sinnvolle Platzierung und prüfe die exportierte Folie in der vorgesehenen Auflösung.

SVG kann für Vektorlogos geeignet sein, wenn das Zielsystem es akzeptiert. PNG ist nützlich für Bilder mit fester Größe und Transparenz. Unser Leitfaden zu Logoformaten erklärt die breitere Auswahl.

Halte vor dem Export vier Dinge fest:

• Wo das Logo erscheint und welche Dateiformate akzeptiert werden
• Seine Anzeigebreite und -höhe einschließlich transparenter Innenabstände
• Ob eine Rasterversion mit höherer Pixeldichte benötigt wird
• Das Dateigrößenlimit für Uploads und mögliche Größenänderungen durch die Plattform

Weiter mit: Leitfaden zu Logoformaten

PNG-Maße berechnen

Verwende für eine Rasterplatzierung diese Planungsregel:

Exportbreite = Anzeigebreite × angestrebte Pixeldichte.

Wende denselben Faktor auf die Höhe an. Ein 2×-Export verdoppelt beide Maße und enthält insgesamt viermal so viele Pixel. Das bedeutet nicht, dass das Logo auf der Seite doppelt so groß erscheinen soll. Das Gerätepixelverhältnis des Browsers beschreibt das Verhältnis zwischen physischen Bildschirmpixeln und CSS-Pixeln.

Für das folgende Website-Beispiel hätte eine 3×-Version 600 × 150 Pixel. Das ist eine separat mit dem Entwickler abzustimmende Anforderung, kein Grund, jede mögliche Größe zu exportieren.

Für responsive Websites kann ein Entwickler mit srcset mehrere Bildvarianten bereitstellen. So kann der Browser eine passende Ressource wählen. Exportierte Dateien und Anzeigeeinstellungen der Website müssen zusammenpassen.

Dies sind Beispielrechnungen für ein fiktives Morrow-Quay-Logo auf einer Fläche im Verhältnis 4:1. Sie veranschaulichen Projektentscheidungen, keine Plattformvorgaben oder tatsächlichen Kundenergebnisse.

Weiterführende Artikel: MDN: devicePixelRatio · MDN: Responsive Bilder

Prüfe E-Mail-Maße im tatsächlichen Editor

Ein PNG mit 360 × 90 ist für die beispielhafte Signatur mit 180 × 45 nur dann ein sinnvoller Ausgangspunkt, wenn die E-Mail-Einrichtung es auf diese Anzeigegröße begrenzt. Füge es ein, prüfe die Größeneinstellungen und versende eine Test-E-Mail. Prüfe das Ergebnis in den von deiner Zielgruppe verwendeten E-Mail-Programmen, gegebenenfalls auch mobil.

Die Gesamtbreite einer E-Mail-Vorlage unterscheidet sich von der Breite ihres Logos. Mailchimp dokumentiert beispielsweise unterschiedliche Bildempfehlungen für seine neuen und älteren Editoren und empfiehlt für hochauflösende Bildschirme höher aufgelöste Bilder mit begrenzten Anzeigemaßen. Es empfiehlt außerdem RGB-Bilder und PNG bei benötigter Transparenz. Das sind Mailchimp-Richtlinien, keine allgemeine Signaturspezifikation.

Verwende eine zum Hintergrund passende Logoversion. Eine transparente weiße Wortmarke kann in einer weißen Nachricht leer wirken. Eine dunkle Wortmarke kann schwer sichtbar werden, wenn das empfangende Programm den Hintergrund ändert. Prüfe das tatsächliche Ergebnis, bevor du das Asset als fertig bezeichnest.

Weiter mit: Übergabe der E-Mail-Signatur und Prüfung empfangener Nachrichten vorbereiten

Weiterführende Artikel: Mailchimp: Bildempfehlungen

Zähle die Logopixel innerhalb der Fläche

Pixelmaße schließen Leerraum ein. Angenommen, ein PNG mit 400 × 100 enthält ein sichtbares Logo mit 320 × 80, zentriert mit je 40 Pixeln links und rechts sowie 10 oben und unten. Wird das gesamte Bild mit 200 × 50 angezeigt, belegt das sichtbare Logo nur 160 × 40.

Dies kann ein beabsichtigter Schutzraum sein. Ist der Abstand unbeabsichtigt, korrigiere die Exportbegrenzung in der Quelle. Behalte freigegebene Schutzraumregeln bei und sage dem Entwickler, ob dieser Abstand in der Datei steckt oder durch das Layout ergänzt werden soll. Das gesamte Bild zum Ausgleich zu vergrößern verändert die sichtbare Größe erneut.

Exportiere die Größen in Figma oder Illustrator

Figma unterstützt native Rasterexporte mit eigenen Maßen. Wähle das vorbereitete Logo oder den Frame aus, füge einen PNG-Export hinzu und gib eine Breite wie 400w in das Feld Scale ein. Du kannst auch mit h eine feste Höhe oder einen Faktor wie 2x eingeben. Ein Faktor richtet sich nach den Maßen des ausgewählten Objekts; prüfe daher die resultierenden Pixelmaße.

Illustrators Funktionen Export für Bildschirme und Asset-Export unterstützen ebenfalls mehrere Skalierungen und Formate. Bereite das richtige Asset oder die Zeichenfläche vor, wähle PNG und die erforderlichen Skalierungen und prüfe dann die heruntergeladenen Maße.

Für eine vollständige Figma-Übergabe folge unserem Logoexport-Ablauf.

Weiter mit: Logoexport-Ablauf

Weiterführende Artikel: Figma: Exportformate und Einstellungen · Adobe: Assets sammeln und stapelweise exportieren

Gestalte die Übergabe verständlich

Ergänze einen kurzen Hinweis: „Das Website-PNG ist ein 2×-Asset für eine Anzeige mit 200 × 50 Pixeln. Proportionen beibehalten.“ Bewahre die freigegebene Vektor-Masterdatei auf, damit spätere Größen direkt daraus erstellt werden können.

Für wiederholte Paketarbeit ergänzt logopack.app Pro eigene PNG- und JPG-Exportgrößen. Beginne mit einem freigegebenen SVG, wähle die Größen für deine Einsatzorte und prüfe die heruntergeladenen Assets. Native Exporte aus dem Editor bleiben eine gültige Möglichkeit; der Paketablauf ist nützlich, wenn du diese individuellen Dateien zusammen mit der übrigen Lieferung möchtest.

Öffne vor der Übergabe die tatsächlichen Dateien, prüfe Pixelmaße und Transparenz und setze das wichtigste Asset am echten Einsatzort ein. Wenn eine korrekt dimensionierte Datei trotzdem unscharf wirkt, nutze unseren Leitfaden zur Fehlersuche bei unscharfen PNGs.

Benenne Dateien nach den Informationen, die der Kunde benötigt. Für dieses Beispiel:

• MorrowQuay_Primary_Web_400x100.png
• MorrowQuay_Primary_Email_360x90.png
• MorrowQuay_White_Slides_960x240.png

Weiter mit: Leitfaden zur Fehlersuche bei unscharfen PNGs

Weiterführende Artikel: Ein Logopaket mit logopack.app vorbereiten