Logo für Website, E-Mail-Signatur und Favicon vorbereiten

Um ein Logo für die Website vorzubereiten, machen Sie aus einer Masterdatei ein kleines Set: ein optimiertes SVG für Kopf- und Fusszeile, PNG-Versionen in zwei oder drei Breiten für E-Mail-Signaturen, Dokumente und Upload-Formulare, ein quadratisches Profilbild, ein Favicon-Set mit den HTML-Tags und die Markenfarben als exakte Werte. Ausgehend vom SVG des Grafikbüros erstellt SchweizerIMG jede dieser Dateien im Browser, in einer Handvoll Durchgängen.

Dieser Anwendungsfall ist die Checkliste und die Reihenfolge der Arbeit. Warum der Master ein Vektor sein sollte, erklärt SVG oder PNG für Logos; welche Icon-Grössen Browser und Startbildschirme erwarten, steht in Favicon-Grössen erklärt. Ein noch nicht veröffentlichtes Logo – etwa ein neuer Auftritt vor dem Stichtag – verlässt Ihr Gerät während der Arbeit nie; siehe die Sicherheitsseite.

Das Logo-Set: welche Dateien eine KMU-Website braucht

Vor dem Start: die richtigen Dateien beim Grafikbüro anfragen

• Den Master als SVG, mit in Pfade umgewandelter Schrift. SchweizerIMG lädt nie externe Schriften und zeichnet verbleibenden Text mit den mitgelieferten Schriften – eine Wortmarke in einer besonderen Schrift kann sich sonst verändern.
• Das Symbol allein, ohne Wortmarke. Daraus werden Favicon und Profilbild, wo ein ganzes Logo zu klein zum Lesen ist.
• Eine helle Version für dunkle Hintergründe – eine dunkle Fusszeile, ein dunkles E-Mail-Design.
• Die Farbwerte, die das Grafikbüro verwendet hat, vor allem für den Druck. Aus einer Datei gelesene Farben sind Bildschirmwerte.

Logo für die Website vorbereiten, Schritt für Schritt

Jeder Schritt ist ein Durchgang, und ein Durchgang ist ein Vorgang. Mit einem anderen Werkzeug fortfahren gibt ein Ergebnis ohne Zwischen-Download weiter – siehe mit weiterem Werkzeug fortfahren.

1. 1

   SVG optimieren

   Öffnen Sie SVG optimieren und fügen Sie die Masterdatei hinzu. Sicher (behält IDs, Klassen und Stile) ist die richtige Vorgabe, wenn Ihre Website das Logo per CSS gestaltet, sonst Aggressiv (am kleinsten). Lassen Sie Prüfen, ob das Ergebnis identisch aussieht eingeschaltet und Titel und Beschreibung stehen: Screenreader lesen sie vor. Skripte und verknüpfte Dateien werden zuerst entfernt.

2. 2

   PNG- und WebP-Versionen exportieren

   Stellen Sie in SVG zu PNG, JPG, WebP oder AVIF Grösse nach auf Breite und tragen Sie mehrere Breiten ein, zum Beispiel 400 und 800 – je ein Bild, in einem Durchgang. Lassen Sie den Hintergrund transparent. Wählen Sie PNG für E-Mail und Dokumente und machen Sie einen zweiten Durchgang mit WebP für Webseiten.

3. 3

   Quadratisches Profilbild erstellen

   Exportieren Sie das Symbol in einer Breite und öffnen Sie dann Rand hinzufügen mit Art: Quadratisch und einer Füllfarbe aus Ihrer Marke. Lassen Sie etwas Platz um das Zeichen: Viele Profilbilder werden als Kreis angezeigt.

4. 4

   Favicon-Set erstellen

   Öffnen Sie Favicon & App-Icons mit dem SVG des Symbols, geben Sie etwas Rand und eine Hintergrundfarbe für die Apple- und maskierbaren Icons an und tragen Sie ein, wo die Dateien auf der Website liegen werden. Laden Sie das Set herunter und fügen Sie die Tags aus snippet.html in den <head> ein.

5. 5

   Markenfarben festhalten

   Öffnen Sie ein PNG des Logos in Farbpipette & Palette, wählen Sie die exakten Farben oder lassen Sie die Palette extrahieren, und erstellen Sie CSS-Variablen (.css), JSON und ein Farbfeldbild (.png). Jede Farbe kommt mit HEX-, RGB-, HSL-, HSV- und OKLCH-Werten.

Nur ein JPG oder PNG des Logos? Bereinigen oder vektorisieren

Viele KMU haben ihr Logo nur noch als Bild von einer alten Website oder aus einer E-Mail. Zwei Werkzeuge helfen, mit klaren Grenzen:

• Transparenter Hintergrund: Hintergrundfarbe entfernen macht einen gleichmässigen Hintergrund anhand seiner Farbe transparent – ohne KI. Hintergrundfarbe auf auto erkennt ihn an den Rändern. Mit den Rändern verbunden (umschlossene Bereiche bleiben erhalten) lässt das Weiss in Buchstaben wie O stehen; Überall im Bild entfernt es auch dort. Erhöhen Sie die Toleranz bei einem JPG mit Kompressionsrauschen und lassen Sie Kanten glätten eingeschaltet. Ein Verlauf oder ein Fotohintergrund lässt sich so nicht sauber entfernen.
• Wieder ein Vektor: Bild zu SVG (Vektorisieren) baut einfache, flächige Logos als Formen nach; die Vorgabe Logo (bis zu 8 flächige Farben) passt für die meisten. Das Ergebnis ist eine Rekonstruktion, nicht die Datei des Grafikbüros: Prüfen Sie es gross und klein, und nehmen Sie die grösste, sauberste Vorlage, die Sie haben. Welche Pläne Bild zu SVG (Vektorisieren) umfassen, steht auf der Preisseite.

Vor dem Livegang: die letzte Kontrolle

• Kopfzeile auf dem Smartphone und einem hochauflösenden Bildschirm: Das SVG sollte scharf, die Wortmarke lesbar sein.
• Helle und dunkle Hintergründe: Ein dunkles Logo auf transparentem PNG verschwindet in einem dunklen E-Mail-Design – verwenden Sie dort die helle Version.
• Tab und Startbildschirm: Das Favicon sollte bei 16 Pixeln erkennbar und auf dem Smartphone nicht abgeschnitten sein.
• Einheitliche Dateinamen: zum Beispiel muster-ag-logo-800.png, damit Mitarbeitende die richtige Datei wählen.
• Ein Ordner für das Set: Master-SVG, Exporte, Favicon-Set und Farbdatei zusammen, damit das nächste Update von denselben Dateien ausgeht.

Agenturen, die solche Sets für mehrere Kundinnen und Kunden vorbereiten, finden den weiteren Ablauf auf der Seite für Agenturen.

Häufige Fragen

Welche Logo-Dateien braucht eine KMU-Website?

Ein optimiertes SVG für die Website, transparente PNGs in zwei oder drei Breiten für E-Mail und Dokumente, ein quadratisches Profilbild, ein Favicon-Set und die Farbwerte. Ein einziges Master-SVG reicht, um alles zu erstellen.

Kann ich aus einem Logo mit langer Wortmarke ein Favicon machen?

Nehmen Sie stattdessen das Symbol oder eine Initiale: Eine Wortmarke ist bei 16 Pixeln unleserlich. Gibt es kein Symbol, erstellt Favicon & App-Icons das Set auch aus Text oder einem Emoji auf einer Markenfarbe.

Wie finde ich die HEX-Werte meiner Markenfarben?

Öffnen Sie das Logo in Farbpipette & Palette und wählen Sie die Farben. Für den Druck fragen Sie das Grafikbüro nach den festgelegten Werten: Die angezeigten CMYK-Werte sind ungefähr.

Kann ich den weissen Hintergrund aus einem Logo-JPG entfernen?

Ja, wenn der Hintergrund gleichmässig ist: Hintergrundfarbe entfernen macht ihn transparent und speichert das Ergebnis als PNG, WebP oder AVIF. Danach passt das Logo auf jede Farbe.

Bereit, Ihr Logo in Ordnung zu bringen? Öffnen Sie die Vektorwerkzeuge und die Erstellungswerkzeuge, sehen Sie die unterstützten Bildformate an oder erstellen Sie ein kostenloses Konto.