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

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.

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.

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

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 listet die genauen Dateien, und Googles Favicon-Richtlinien 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.

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.

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 hat jede Postgröße.

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

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, bevor du etwas an eine Druckerei schickst, und sieh dir E-Mail-Signatur-Design für die Signatur selbst an.

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 behandelt, welche Version des Logos in welches Format gehört.