Kostenloser HTML-E-Mail-Signatur-Generator für Gmail und Outlook

Eine E-Mail-Signatur ist der Block mit Name, Berufsbezeichnung, Firma und Kontaktdaten, den Ihr E-Mail-Programm unter jede gesendete Nachricht setzt. Der Generator baut sie als HTML-Tabelle mit Stilen direkt an den einzelnen Elementen, deshalb behält die eingefügte Signatur Farben, Abstände und Links.

Pflichtfelder sind nur zwei: Vor- und Nachname und E-Mail. Fehlt eines davon, setzt ein Klick auf Signatur kopieren (Gmail / Outlook) den Cursor in das leere Feld. Alles andere ergänzen Sie, wenn es dem Empfänger hilft: Telefon, Webseite, Adresse, einen Link zur Terminbuchung oder Ihre Profile in sozialen Medien.

Wie Kontaktdaten auf Briefpapier und Visitenkarten stehen, beschreibt die internationale Norm ITU-T E.123. Sie empfiehlt Telefonnummern mit Pluszeichen und Ländervorwahl, ohne Klammern, die E-Mail-Adresse mit Bezeichnung unter der Telefonnummer und die Webadresse ohne das Präfix http://[1]. Das Layout Beschriftungsspalte folgt genau dieser Reihenfolge: Telefon, darunter E-Mail und Webseite, jeweils mit Bezeichnung in einer eigenen Spalte.

Ein leeres Feld erscheint nicht in der Signatur. Die Namen unten sind die Feldbezeichnungen aus dem Editor, und der graue Text in jedem leeren Feld zeigt einen Beispieleintrag.

• Berufsbezeichnung und Firmenname stehen in einer Zeile, getrennt durch einen Punkt.
• Das Feld Telefon nimmt eine Nummer in beliebiger Schreibweise auf. Die Signatur zeigt sie genau so, wie Sie sie eingeben, der Anruf-Link besteht nur aus Ziffern und Pluszeichen. Ein tel:-Link darf keine Leerzeichen und keine Wörter innerhalb der Nummer enthalten[2].
• Die Adresse aus dem Feld Webseite erscheint in der Signatur so, wie Sie sie eingeben, zum Beispiel www.firma.de. Fehlt https://, ergänzt der Generator es nur im Link.
• Das Feld Avatar / Logo (Bild-URL) nimmt die Adresse eines Bildes auf, das auf einer Webseite veröffentlicht ist. Nach dem Einfügen wählen Sie die Form (Rund, Abgerundet, Quadrat) und die Größe: 40, 56 oder 72 px. Ein Bild mit mindestens 144 px Kantenlänge bleibt auf Bildschirmen mit hoher Pixeldichte scharf.
• In die Zeile über dem Namen kommt ein kurzer Text in Großbuchstaben, zum Beispiel ein Firmenname oder ein Slogan.
• Der Namens-Tag ist ein kurzer Zusatz in einem ovalen Rahmen neben dem Namen, etwa ein akademischer Grad wie MBA oder Pronomen.
• In die Zusätzliche Zeile passt ein Satz darüber, was Sie tun.
• Adresse und Formale Angaben sind mehrzeilige Felder: Die Eingabetaste beginnt auch in der Signatur eine neue Zeile. Formale Angaben wie Registergericht, Handelsregisternummer oder USt-IdNr. setzt der Generator in kleiner Schrift über den Haftungsausschluss.

Der Generator hat acht Layouts. Im Bereich Aussehen sehen Sie jedes als Miniatur, die die Signatur mit Ihren Angaben und Farben zeigt. Ein Layoutwechsel löscht kein Feld:

• Standard: Angaben untereinander, Telefon, E-Mail und Webseite in einer Zeile mit Bezeichnungen.
• Oberer Balken: Name, Berufsbezeichnung und Avatar auf einem Balken in der Akzentfarbe, die übrigen Angaben darunter.
• Beschriftungsspalte: Telefon, E-Mail und Webseite untereinander, die Bezeichnungen in einer eigenen Spalte.
• Zentriert: alles mittig ausgerichtet, der Avatar über dem Namen.
• Kompakt: Name, Berufsbezeichnung, Firma und Kontakt in einer Zeile, darunter soziale Medien und Haftungsausschluss.
• Zwei Spalten: Avatar, Name und Berufsbezeichnung auf der einen Seite, Kontakt, soziale Medien und Schaltflächen auf der anderen, getrennt durch eine senkrechte Linie.
• Minimalistisch: Name, Berufsbezeichnung, Firma, E-Mail und Telefon, ohne Webseite, Avatar und Schaltflächen.
• Unterer Balken: Angaben oben, Schaltflächen und Firmenname auf einem Balken in der Akzentfarbe darunter.

Füllen Sie ein Feld aus, das das gewählte Layout nicht zeigt, erscheint unter der Vorschau ein Hinweis mit dem Namen dieses Feldes.

Im Bereich Schaltflächen richten Sie zwei Schaltflächen ein. Die erste hat einen Hintergrund in der Akzentfarbe, Text und Adresse tragen Sie in die Felder Button-Text und CTA-Link ein. Die zweite hat nur einen Rahmen und nutzt die Felder Text der zweiten Schaltfläche und Link der zweiten Schaltfläche. Jede Schaltfläche braucht Text und Link. Ist eines der beiden Felder leer, erscheint sie nicht in der Signatur.

Ein Link kann eine Webseite öffnen, eine neue E-Mail (mailto:info@firma.de) oder einen Anruf (tel:+49301234567). Eine Webadresse müssen Sie nicht mit https:// beginnen, das ergänzt der Generator. Adressen, die mit javascript:, data:, vbscript: oder file: beginnen, weist er zurück. Eine Schaltfläche mit einem solchen Link erscheint also nicht.

Die Button-Abrundung hat drei Stufen: Keine, Leicht und Voll. Outlook für Windows unterstützt keine abgerundeten Ecken per CSS[3], dort haben Schaltflächen immer eckige Ecken. Die Layouts Kompakt und Minimalistisch zeigen keine Schaltflächen. Denselben Link, etwa zur Terminbuchung, bringen Sie mit dem QR-Code-Generator auch auf die Visitenkarte.

Klicken Sie im Bereich Soziale Medien unter Profil hinzufügen auf den Namen eines Dienstes, dann fügt der Editor ein Feld für die Profiladresse hinzu. Zur Auswahl stehen 12 Dienste: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram und Pinterest. In der Signatur erscheinen nur Dienste mit eingetragener Adresse, und die Schaltfläche mit dem Kreuz neben einem Feld entfernt das Profil. Die Profile stehen in der Signatur in derselben Reihenfolge wie im Editor. Ein neues kommt ans Ende der Liste, und die Reihenfolge ändern Sie, indem Sie ein Profil am Griff neben seinem Feld ziehen. Mit der Tastatur markieren Sie den Griff und verschieben das Profil mit den Pfeiltasten nach oben und unten.

Die vollständige Profiladresse ist nicht nötig. In den Feldern Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram und Pinterest genügt @Nutzername, der Generator baut daraus die Profiladresse. LinkedIn braucht die Adresse, weil Personen- und Unternehmensprofile unterschiedliche Pfade haben (/in/ und /company/). Im Feld WhatsApp geben Sie Ihre Telefonnummer mit Ländervorwahl ein: Der Generator macht daraus einen https://wa.me/-Link nur mit Ziffern, im Format, das der WhatsApp-Hilfebereich beschreibt[4].

Symbole statt Dienstnamen

Die Option Symbole statt Dienstnamen anzeigen ersetzt die Namen durch Symbole mit 16, 20 oder 24 px in drei Farben: Plattformfarben, Dunkel oder Weiß, Letzteres für einen dunklen Signaturhintergrund. Die Symbole sind PNG-Bilder von arteontools.com. Ein direkt in den Code geschriebenes SVG-Symbol wird in Gmail, Outlook und Yahoo Mail nicht angezeigt[5], und Bilder im Base64-Format entfernt Gmail[6]. Jedes Symbol trägt den Dienstnamen als Alternativtext. Blockiert ein E-Mail-Programm Bilder, sieht der Empfänger diesen Namen.

Farben

Die Akzentfarbe wählen Sie aus fünf fertigen Farbfeldern oder im Farbwähler des Browsers, der sich per Klick auf das farbige Quadrat öffnet. Sie können auch einen HEX-Code in das Feld neben dem Quadrat eingeben, etwa aus Ihrem Corporate-Design-Handbuch. Das Feld nimmt den Code mit und ohne Rautenzeichen an, mit sechs oder drei Zeichen, zum Beispiel #1d4ed8 oder 14c. Genauso, nur ohne fertige Farbfelder, stellen Sie Textfarbe und Hintergrundfarbe ein. Die Akzentfarbe erhalten Name, Links, Schaltflächen, Rahmen und die Balken in den Layouts Oberer Balken und Unterer Balken. Die Hintergrundfarbe füllt die ganze Signatur. Hellen Text auf farbigem Hintergrund prüfen Sie im Farbkontrast-Checker, einen Farbcode aus Ihrem Corporate Design rechnen Sie im HEX-in-RGB-Umrechner um. Nennt Ihr Corporate-Design-Handbuch die Farben in RGB, erhalten Sie den HEX-Code im RGB-in-HEX-Umrechner. Druckfarben in CMYK wandeln Sie zuerst im CMYK-in-RGB-Umrechner in RGB um. Die Akzentfarbe aus Ihrem Logo lesen Sie mit dem Bild-Farbextraktor aus, passende Farbtöne finden Sie im Farbpaletten-Generator.

Schriftart und Schriftgröße

Zur Wahl stehen Arial, Verdana, Tahoma, Trebuchet MS und Georgia, Schriften, die Microsoft mit Windows ausliefert[7]. Hat das Gerät des Empfängers die gewählte Schrift nicht, nimmt das E-Mail-Programm seine eigene serifenlose Schrift, bei Georgia eine Serifenschrift, weil der Generator sie so hinterlegt.

Die Schriftgröße hat drei Stufen: Klein 12 px, Standard 13 px und Größer 14 px. Der Name ist 2 px größer als der übrige Text, der Haftungsausschluss 2 px kleiner. Outlook gibt Schriftgrößen in Punkt an, 13 px entsprechen 9,75 pt, was Sie im px-in-pt-Umrechner nachprüfen.

Textrichtung

Die Option Textrichtung mit der Auswahl Von rechts nach links richtet die Signatur so aus, wie es eine arabische oder hebräische Signatur verlangt. Der Generator setzt dann das Attribut dir="rtl", das Gmail, Outlook und Apple Mail unterstützen[8]. Telefonnummern, E-Mail-Adressen und Webadressen bleiben von links nach rechts, damit sich die Ziffern nicht umdrehen. Arabische Buchstaben enthalten Arial und Tahoma[9], Verdana, Georgia und Trebuchet MS dagegen nicht[10].

Rahmen der Signatur

Unter Signaturrahmen kreuzen Sie die Seiten an, an denen ein Rahmen in der Akzentfarbe stehen soll: Links, Rechts, Oben und Unten. Eine einzelne Seite ist 4 px breit, alle vier zusammen ergeben einen vollen Rahmen mit 2 px.

Der Bereich Textstil zeigt für jedes Element der Signatur eine eigene Zeile: Vor- und Nachname, Berufsbezeichnung, Firma, Kontaktdaten, Soziale Medien und Haftungsausschluss. Die Farbe wählen Sie im Farbwähler des Browsers per Klick auf das farbige Quadrat. Hat ein Text eine eigene Farbe, erscheint neben dem Quadrat die Schaltfläche Standardfarbe wiederherstellen. Minus und Plus ändern die Größe um 2 px pro Klick, dazwischen steht die Textgröße in Pixeln. Sie ändern sie um höchstens 4 px nach unten oder oben gegenüber der Grundgröße.

Im Bereich Abstände wählen Sie unter Innerer Abstand der Signatur 8, 16 oder 24 px und stellen die Abstände zwischen den Elementen in Schritten von 2 px ein, von 0 bis 32 px. Sie sehen nur Abstände für Elemente, die in der Signatur und im gewählten Layout vorkommen:

• Unter dem Namen
• Unter der Berufsbezeichnung
• Unter der zusätzlichen Zeile
• Über den Kontaktdaten
• Über den sozialen Medien
• Über der Schaltfläche
• Über dem Haftungsausschluss

Im Bereich Haftungsausschluss tragen Sie in ein Textfeld ein, was am Ende der Signatur in kleinerer Schrift steht, zum Beispiel einen Vertraulichkeitshinweis. Das Feld ist anfangs leer, und die Schaltfläche Beispieltext einfügen setzt einen fertigen Vertraulichkeitshinweis ein, den Sie ändern können. Ein leeres Feld fügt der Signatur nichts hinzu.

Die Option Trennlinie zwischen Kontaktdaten und Haftungsausschluss anzeigen erscheint, sobald die Signatur einen Haftungsausschluss oder formale Angaben enthält, und setzt darüber eine waagerechte Linie. Der Linienstil ist durchgehend, gestrichelt oder gepunktet, die Stärke beträgt 1, 2 oder 3 px, und die Linienfarbe ist frei wählbar, die Schaltfläche Standard stellt das helle Grau #e5e7eb wieder her. Die Linie zeichnen die Layouts Standard, Oberer Balken, Beschriftungsspalte und Zentriert. Im Layout Zwei Spalten trennt eine eigene dünne Linie den Haftungsausschluss vom Rest.

Klicken Sie auf Signatur kopieren (Gmail / Outlook). Damit kopieren Sie die Signatur samt Formatierung, sodass Farben, Links und Bilder nach dem Einfügen erhalten bleiben. Unter der Vorschau erscheinen dann drei Schritte zum Einfügen, dieselben wie unten, mit einem Umschalter zwischen Gmail und Outlook. Ändern Sie nach dem Kopieren etwas an der Signatur, erinnert Sie der Editor daran, sie erneut zu kopieren.

Gmail im Browser

1. Klicken Sie rechts oben auf das Einstellungssymbol und dann auf Alle Einstellungen aufrufen.
2. Fügen Sie im Abschnitt Signatur die Signatur mit Strg + V ein, am Mac mit Cmd + V.
3. Klicken Sie unten auf der Seite auf Änderungen speichern.

Eine Gmail-Signatur kann bis zu 10 000 Zeichen lang sein, und ein Bild in der Signatur zählt ebenfalls zu dieser Grenze[11].

Neues Outlook für Windows und Outlook im Web

1. Wählen Sie Einstellungen, dann Konten und Signaturen.
2. Fügen Sie eine neue Signatur hinzu, geben Sie ihr einen Namen und fügen Sie die Signatur in das Bearbeitungsfeld ein.
3. Klicken Sie auf Speichern.

Im klassischen Outlook für Windows öffnen Sie eine neue Nachricht und wählen im Menü Nachricht die Option Signatur und dann Signaturen[12].

Die Vorschau zeigt die Signatur so, wie ein Browser sie darstellt. E-Mail-Programme verstehen weniger HTML, und jedes etwas anders, deshalb verzichtet der Generator auf Elemente, die sie nicht anzeigen. Manche Unterschiede hängen aber davon ab, was Sie eingeben:

• Ein Bild, das direkt in der Adresse steckt (data:image/png;base64,…), erscheint in Gmail nicht[6]. Base64-Code ist in HTML- und CSS-Dateien nützlich, das Avatar-Feld braucht aber eine Dateiadresse, deshalb zeigt der Editor bei Base64-Code einen Hinweis.
• Gmail zeigt SVG-Bilder bei Google-Konten nicht an[13], wandeln Sie ein Logo im SVG-Format daher vorher in PNG um, zum Beispiel mit dem SVG-zu-PNG-Konverter.
• Outlook für Windows zeigt keine WebP-Bilder[14], speichern Sie Logo und Foto daher als PNG oder JPG, zum Beispiel mit dem WebP-zu-PNG-Konverter.
• Outlook für Windows blockiert standardmäßig den automatischen Download von Bildern aus dem Internet[15]. Bis der Empfänger den Download erlaubt, sieht er statt Symbolen die Dienstnamen und keinen Avatar.
• Die Bildadresse muss direkt auf die Datei zeigen. Ein Freigabelink aus Google Drive oder Dropbox öffnet eine Vorschauseite, das Bild erscheint also nicht.

Der Generator speichert Angaben und Einstellungen bei jeder Änderung im Browser (localStorage), getrennt für jede Sprachversion der Seite. Kommen Sie im selben Browser zurück, wartet die Signatur im zuletzt gespeicherten Zustand. Die Signaturdaten gehen nicht an unseren Server.

Die Schaltfläche Einstellungen exportieren speichert Angaben, Farben, Layout, Abstände und Textstile in einer .json-Datei, Einstellungen importieren lädt sie auf einem anderen Rechner oder bei einer Kollegin, die nur ihre eigenen Angaben ändert. Der Import prüft jeden Wert: Eine Farbe, die nicht als HEX geschrieben ist, und eine Schrift außerhalb der Liste bleiben bei den Einstellungen von vor dem Import.

Die Schaltfläche Standard wiederherstellen leert nach Ihrer Bestätigung alle Felder und stellt das ursprüngliche Aussehen der Signatur wieder her. Das lässt sich nicht rückgängig machen, exportieren Sie die Einstellungen also vorher.

Alle diese Schaltflächen stehen in der Vorschaukarte unter der Kopier-Schaltfläche. Dort finden Sie auch HTML-Code kopieren (reiner Code für einen HTML-Editor) und Als HTML herunterladen (die Datei e-mail-signatur.html). Der Umschalter über der Vorschau mit Sonne (Hell) oder Mond (Dunkel) zeigt die Signatur auf hellem oder dunklem Hintergrund.