Ein Logo für Website, E-Mail und Dokumente exportieren

Ein Logo, das im Designprogramm richtig aussieht, kann nach dem Hochladen winzig, unscharf oder unsichtbar werden. Ursachen sind etwa leere Ränder, zu wenige Pixel, eine fehlende Schrift oder ein ungeeigneter Hintergrund. Kläre zuerst, wo das Logo erscheinen soll, und wähle danach die Exporteinstellungen.

Mit dem besten verfügbaren Original beginnen

Arbeite mit der bearbeitbaren Datei des Designers oder einer echten Vektorversion. Bewahre diese Vorlage getrennt von den veröffentlichten Kopien auf. SVG kann Vektorpfade erhalten, aber auch ein niedrig aufgelöstes Pixelbild enthalten. Die Endung .svg beweist nicht, dass alle Bestandteile beim Vergrößern scharf bleiben.

Wenn du nur ein kleines JPG hast, frage nach dem Original, bevor du einen größeren Export erstellst. Die Umwandlung in PNG oder SVG stellt weder Buchstaben noch Kanten wieder her. Der Leitfaden zu SVG und PNG hilft dir, deine Datei einzuordnen.

Das Format nach dem Einsatzort wählen

SVG erhält Vektorformen; PNG speichert ein festes Pixelraster. Die verlustfreie PNG-Komprimierung eignet sich für Schrift, einfarbige Flächen und scharfe Kanten: Beim Speichern entstehen keine zusätzlichen JPG-Kompressionsartefakte. JPG kann Kanten aufweichen oder Farbsäume um Buchstaben erzeugen und erhält keine Transparenz.

WebP unterstützt verlustbehaftete und verlustfreie Komprimierung. Pixilos SVG-zu-WebP-Werkzeug hat einen Qualitätsregler, aber keinen separaten verlustfreien Modus. Der Wert 100 garantiert daher keine identischen Pixel. Nutze WebP, wenn das Ziel es akzeptiert und der tatsächliche Export gut aussieht. Bei einem einfachen Logo kann SVG oder ein passend großes PNG die bessere Wahl sein.

Die Exportgröße auf die Anzeige abstimmen

Unterscheide die Pixelmaße der Datei von ihrer Anzeigegröße. Angenommen, die exportierte Grafik ist viermal so breit wie hoch und soll mit 160 × 40 CSS-Pixeln erscheinen. Ein PNG mit 320 × 80 Pixeln liefert in beiden Richtungen zwei Bildpixel pro CSS-Pixel – ein brauchbarer Ausgangspunkt für ein hochauflösendes Display. Das ist ein Beispiel, keine feste Logogröße und keine Pflicht, jedes Bild doppelt so groß zu exportieren.

Sperre das Seitenverhältnis und gib normalerweise nur ein Maß ein. Ist das Logo doppelt so breit wie hoch, ergibt eine Anzeigebreite von 160 Pixeln eine Höhe von 80 statt 40 Pixeln. Passe es ohne Verzerren in die verfügbare Breite und Höhe ein. Nutze eine freigegebene alternative Anordnung, falls das vollständige Logo nicht passt.

Die Maße schließen transparente Ränder ein. Füllt das sichtbare Logo nur die Hälfte einer 320 Pixel breiten Fläche, erscheint es ungefähr 80 Pixel breit, wenn das gesamte Bild mit 160 Pixeln angezeigt wird. Entferne unbeabsichtigten Leerraum im Original und erhalte den vorgeschriebenen Schutzraum. Stelle die Anzeigebreite auch im Website- oder Signatureditor ein und prüfe, ob der Dienst eine verkleinerte Kopie erstellt.

Ein anderer DPI-Wert allein ergänzt keine Bilddetails. Siehe den Leitfaden zu DPI, PPI und Pixeln. Frage für professionellen Druck nach gesonderten Datei-, Farb- und Auflösungsvorgaben.

Zeichenfläche und Schrift vor dem Export prüfen

Passe den Exportbereich an das Logo an und erhalte dabei seinen Schutzraum sowie Platz für Konturen und Schatten. Eine große leere Zeichenfläche lässt das sichtbare Logo klein wirken, auch wenn die Datei viele Pixel enthält. Entferne keine bewusst vorgesehenen Abstände, nur um enger zuzuschneiden. Inkscapes Exportanleitung erläutert den Unterschied zwischen Seite, Zeichnung und Auswahl.

Prüfe Schriften und verknüpfte Grafiken vor dem Export. Beim Umwandeln von Text in Pfade werden Buchstaben zu Vektorformen. Ihr Aussehen hängt dann nicht mehr davon ab, ob der Empfänger die Schrift besitzt. Die Buchstaben lassen sich anschließend nicht mehr wie normaler Text bearbeiten. Wandle daher nur eine Exportkopie um und behalte das Original. Ein eingebettetes Pixelbild wird dadurch nicht zur Vektorgrafik.

Erstelle eine eigenständige SVG-Datei mit allen benötigten Bildern und Stilen. Eine separat richtig angezeigte Datei kann als Website-Bild anders aussehen, weil externe Ressourcen dort eingeschränkt sind. Das erläutert die MDN-Dokumentation. Vergleiche den Export mit dem Entwurf und prüfe danach die platzierte Version. Kontrolliere Buchstaben, Abstände, abgeschnittene Bereiche und Effekte, nicht nur, ob sich die Datei öffnen lässt.

Bildschirmfarben getrennt von Druckdateien vorbereiten

Verwende die freigegebenen RGB-Farben der Marke für Bildschirmversionen. Für PNG- und JPG-Webexporte ist sRGB ein praktikabler Standard. Die Adobe-Anleitung für Onlinefarben beschreibt die Umwandlung. Nutzt die Quelle ein anderes Farbprofil, konvertiere die Farben im Designprogramm, statt nur ein anderes Profil zuzuweisen. Prüfe das Ergebnis.

Bewahre ein CMYK- oder Sonderfarb-Druckoriginal separat auf. Für Bildschirm und Druck können unterschiedliche freigegebene Farbwerte gelten; ein Formatkonverter kann sie nicht für dich auswählen. Vergleiche mit der freigegebenen Bildschirmversion. Verschiedene Displays können trotzdem abweichen. Bei sichtbaren Unterschieden hilft der Leitfaden zur Fehlersuche bei Bildfarben.

Versionen für helle und dunkle Hintergründe vorbereiten

Transparenz verändert die Logofarben nicht. Exportiere bei Bedarf ein freigegebenes dunkles Logo für helle und ein weißes oder helles Logo für dunkle Flächen. Auf der Website muss die Vorlage oder deren Entwickler die richtige Version auswählen. Zwei Dateien wechseln nicht automatisch miteinander.

Prüfe E-Mails gesondert. Apps können im dunklen Modus den Nachrichtenhintergrund ändern; die Unterstützung für einen Bildwechsel ist unterschiedlich. Teste empfangene Nachrichten im hellen und dunklen Modus. Verschwindet das dunkle Logo, bitte den Designer um eine freigegebene, gut sichtbare Version, etwa mit kontrastierender Kontur oder geeigneter Hintergrundfläche. Keine dieser Lösungen garantiert überall dasselbe Ergebnis. Die Mailchimp-Anleitung zum dunklen Modus erklärt, warum Tests nötig sind.

PNG kann vorhandene Transparenz erhalten; JPG benötigt einen deckenden Hintergrund. Wähle diesen vor dem JPG-Export. Ein Transparenzkästchen entfernt kein weißes Rechteck aus der Zeichnung. Der Leitfaden zu transparenten Hintergründen hilft, einen echten Hintergrund von der Vorschaufläche zu unterscheiden.

PNG-, JPG- oder WebP-Kopien in Pixilo erstellen

1. Öffne das vorbereitete SVG in SVG zu PNG. Wähle SVG zu JPG für ein Ziel, das JPG verlangt, oder SVG zu WebP, wenn du WebP für diese Anwendung gewählt hast.
2. Gib die Exportbreite oder -höhe bei gesperrtem Seitenverhältnis ein. Behalte unterstützte Transparenz oder wähle die endgültige Hintergrundfarbe.
3. Konvertiere und lade die Datei herunter. Prüfe die heruntergeladene Datei, nicht nur die Quellvorschau. PNG hat keinen Regler für verlustbehaftete Qualität; kontrolliere bei JPG und WebP nach Qualitätsänderungen Buchstaben und feine Linien.
4. Platziere die Kopie, lege ihre Anzeigegröße fest und prüfe die veröffentlichte Seite, empfangene Nachricht oder exportierte Datei. Stelle sicher, dass du die neue Datei siehst und keine alte Version aus dem Cache.

Pixilo erstellt statische Bildkopien, kein bearbeitbares Logo und kein optimiertes SVG. Der SVG-Leser lehnt externe Ressourcen und nicht unterstützte Inhalte ab. Wird die Datei zurückgewiesen, exportiere im Designprogramm eine eigenständige Kopie und wandle den Text bei Bedarf in Pfade um. Aktuelle Datei- und Größenlimits stehen auf der Werkzeugseite. Bewahre das Original für spätere Exporte auf.

Dateien eindeutig nach ihrem Zweck benennen

Benenne die Farbe der Grafik getrennt vom Hintergrund. dark-artwork bedeutet beispielsweise dunkle Formen, nicht eine Datei für einen dunklen Hintergrund:

• Bearbeitbares Original: Bewahre die native Designerdatei mit ihrer tatsächlichen Endung getrennt von Veröffentlichungskopien auf.
• brand-logo-dark-artwork.svg und brand-logo-white-artwork.svg: dunkle Grafik für helle Hintergründe und weiße Grafik für dunkle.
• brand-logo-dark-artwork-320x80.png: transparentes PNG für die beispielhafte Anzeige mit 160 × 40 Pixeln. Der Dateiname nennt die Pixelmaße der Datei.
• brand-logo-white-background.jpg: optionales JPG mit deckendem weißem Hintergrund für ein Ziel, das es verlangt.

Notiere kurz die vorgesehene Anzeigegröße und den Hintergrund. Erstelle nur benötigte Versionen. Für ein Favicon ist oft eine eigene vereinfachte Grafik nötig, weil ein vollständiger Schriftzug im Browsertab unlesbar sein kann. Siehe den Favicon-Leitfaden.

Das Logo am Einsatzort prüfen

Prüfe zuerst die kleinste tatsächliche Verwendung. Sind die Buchstaben lesbar, feine Linien sichtbar und Schutzabstände erhalten? Teste danach helle und dunkle Flächen. Sende für E-Mails eine echte Testnachricht und kontrolliere die empfangene Kopie. Öffne bei Dokumenten das exportierte PDF und prüfe einen Ausdruck, falls Papierausgabe wichtig ist.

Gib dem Website-Logo eine passende Textalternative. Ist es der einzige Inhalt eines Startseitenlinks, benenne das Ziel, etwa „Marke – Startseite“. Steht im selben Link bereits sichtbarer Text mit Name und Zweck, vermeide Wiederholungen. Der W3C-Leitfaden zu funktionalen Bildern zeigt beide Muster.

Häufig gestellte Fragen

Warum ist das hochgeladene Logo unscharf, obwohl die heruntergeladene Datei scharf ist?

Vergleiche die tatsächlichen Pixelmaße der hochgeladenen Datei mit ihrer Anzeigegröße. Die Plattform kann eine kleinere Kopie erstellt haben, oder das Layout vergrößert sie. Prüfe, welche Datei die veröffentlichte Seite verwendet und ob überflüssige transparente Ränder die Grafik klein machen. Ein noch größerer Export hilft nicht, wenn die Seite weiter die falsche Version auswählt.

Warum hat das PNG einen weißen Kasten?

Betrachte den Download auf einem Schachbrett und auf einer farbigen Fläche. Gehört der weiße Kasten zu den Pixeln, suche in der Quelle nach einem Hintergrundobjekt oder nach beim Export reduzierter Transparenz. Ist die Datei transparent und erscheint der Kasten erst beim Einsetzen, prüfe den Bildhintergrund oder eine Konvertierung am Einsatzort. Entferne gezeichnete Hintergründe nur, wenn das Logodesign es erlaubt.

Kann ich dieselbe Datei in allen E-Mail-Signaturen verwenden?

Beginne mit einem PNG und teste Signatureditor, empfangene Nachrichten sowie hellen und dunklen Modus. Ein gehostetes Bild muss unter seiner veröffentlichten Adresse verfügbar bleiben; ein eingebettetes muss die Verarbeitung des Mailsystems überstehen. Halte Kontaktdaten als echten Text vor, damit sie auch bei blockierten Bildern lesbar bleiben. Eine gelungene Vorschau im Editor des Absenders reicht nicht.

Wird das Logo durch PNG-zu-SVG-Konvertierung skalierbar?

Ein eingebettetes PNG behält seine ursprünglichen Pixel. Nachzeichnen kann Vektorpfade erzeugen, dabei aber Kurven, Abstände oder Buchstaben verändern. Frage zuerst nach dem Vektororiginal und lasse rekonstruierte Versionen mit dem freigegebenen Logo vergleichen.

Was tun, wenn das Logo ein Uploadlimit überschreitet?

Prüfe zuerst, ob das Limit die Dateigröße in KB oder die Pixelmaße betrifft. Exportiere die benötigten Maße, entferne unbeabsichtigten Leerraum und vermeide unnötiges Hochskalieren. Versuche bei PNG verlustfreie Komprimierung, bevor du Kantenqualität opferst. Ist ein verlustbehaftetes Format nötig, vergleiche beim Senken der Qualität den tatsächlichen Download. Der Leitfaden zur Dateiverkleinerung erklärt die Abwägungen. Es gibt kein einheitliches KB-Ziel für alle Logos und Anwendungen.

Warum verändern sich Buchstaben oder Farben beim Konvertieren?

Vergleiche den bearbeitbaren Entwurf, das exportierte SVG, den Download und das platzierte Ergebnis. Suche die erste abweichende Stufe. Fehlende oder ersetzte Schriften deuten auf den Textexport, fehlende Effekte oder Bilder auf nicht unterstützte SVG-Inhalte hin. Prüfe bei Farbänderungen Quellprofil und Bildschirmexport. Korrigiere diese Stufe und exportiere neu, statt eine bereits fehlerhafte Kopie mehrfach umzuwandeln.