HTML-Signatur-Generator: Code ohne eine Zeile selbst zu schreiben

Was der Generator als HTML ausgibt

Der Generator erzeugt ein HTML-Fragment aus verschachtelten Tabellen mit Inline-Styles. Es enthält keine CSS-Klassen, keinen Style-Block, keine Webschrift und keine externen Dateien ausser den Bildern. Genau diese Beschränkung macht es haltbar: Mailprogramme entfernen Style-Blöcke, ignorieren Klassen und rendern moderne Layout-Techniken nicht.

• Tabellen statt Flexbox oder Grid. Outlook für Windows rendert mit der Layout-Engine von Word. Die kennt keine moderne CSS-Positionierung, sondern Tabellenzellen.
• Styles direkt am Element. Jede Farbe, jeder Abstand und jede Schriftgrösse steht als `style`-Attribut am Tag. Ein zentraler Style-Block wird von Gmail beim Einfügen verworfen.
• Systemschriften. Der Font-Stack beginnt bei den Schriften, die auf dem Gerät des Empfängers ohnehin liegen. Eine geladene Webschrift kommt im Postfach nicht an.
• Feste Pixelwerte. Relative Einheiten fallen je nach Programm unterschiedlich aus; feste Werte sehen überall gleich aus.

Das Ergebnis ist Code, der nach 2005 aussieht und deshalb 2026 noch funktioniert. Wer den Aufbau lieber im Detail nachvollzieht, findet die technischen Gemeinsamkeiten aller Layouts unter Aufbau der Vorlagen im Detail.

Warum handgeschriebenes Signatur-HTML meist bricht

Weil E-Mail-HTML einem anderen Standard folgt als Web-HTML. Was im Browser korrekt aussieht, wird von Mailprogrammen umgeschrieben: Style-Blöcke fliegen raus, Klassen verlieren ihre Regeln, Abstände werden neu berechnet. Ein Layout, das mit Flexbox gebaut ist, fällt in Outlook auf untereinander gestapelte Blöcke zusammen.

• Der Editor schreibt mit. Wer Signatur-HTML in einem WYSIWYG-Feld einfügt, bekommt oft zusätzliche Tags dazu, die das Layout verschieben.
• Bilder brauchen absolute URLs. Ein Pfad wie `/logo.png` funktioniert nur auf Ihrer Website, nicht im Postfach des Empfängers.
• Höhenangaben am Bild sind gefährlich. Outlook gewichtet das `height`-Attribut höher als `height: auto` im Style und staucht damit breite Logos in ein Quadrat.
• Dunkle Modi kehren Farben um. Feste Hintergrundfarben und Textfarben müssen zusammenpassen, sonst steht dunkle Schrift auf dunklem Grund.

Diese vier Punkte lassen sich von Hand lösen — aber jeder von ihnen kostet eine Testrunde durch mehrere Programme. Der Generator hat sie bereits eingebaut.

Wie Sie den fertigen Code einsetzen

Sie kopieren die gerenderte Signatur, nicht den Quelltext. Im Signaturfeld Ihres Mailprogramms markieren Sie alles Vorhandene, löschen es und fügen mit Strg+V beziehungsweise Cmd+V ein. Alternativ laden Sie die HTML-Datei herunter, öffnen sie im Browser, markieren dort die Signatur und kopieren sie von der dargestellten Seite.

Der häufigste Fehler: Quelltext in das Signaturfeld einfügen. Die meisten Programme zeigen dann den Code als Text an. Der Weg führt immer über die dargestellte Signatur, nicht über die Zeichen des Quelltexts.

Der genaue Weg unterscheidet sich je nach Programm. Für Outlook steht er unter fertiges HTML im Signaturfeld einsetzen, für Gmail unter Signatur im Gmail-Konto ablegen. Google beschreibt das Feld zusätzlich in der Hilfe zur Gmail-Signatur.

Wann Sie den HTML-Code selbst brauchen

In drei Fällen: wenn eine IT-Abteilung die Signatur zentral über Microsoft 365 verteilt, wenn ein CRM oder Ticketsystem ein HTML-Feld für die Signatur anbietet, oder wenn ein Dienstleister die Signatur für Sie einrichtet. In allen drei Fällen wird die Datei weitergegeben statt eingefügt.

• Zentrale Verteilung: Die Exchange-Regel oder das Verwaltungswerkzeug erwartet HTML, nicht eine kopierte Signatur — die Varianten vergleicht zentraler Rollout im Microsoft-Umfeld.
• Fremdsysteme: Helpdesk- und CRM-Werkzeuge haben oft ein eigenes Signaturfeld, das HTML akzeptiert.
• Weitergabe an Dritte: Eine Datei lässt sich per Mail verschicken, eine Zwischenablage nicht.

Bilder im HTML: was gehostet sein muss

Jedes Bild in einer HTML-Signatur braucht eine öffentlich erreichbare Adresse. Logos, Profilbilder und Icons werden vom Mailprogramm des Empfängers nachgeladen — liegt die Datei nur auf Ihrem Rechner, sieht der Empfänger einen leeren Platzhalter. Der Generator lädt hochgeladene Bilder deshalb hoch und setzt die vollständige Adresse in den Code.

Bei eingebetteten Bildern — technisch als Data-URI im Code — gibt es das Problem nicht, dafür ein anderes: Outlook stellt sie unzuverlässig dar und manche Spamfilter bewerten sie negativ. Deshalb werden Bilder verlinkt und nicht eingebettet.

Was Sie am erzeugten HTML noch ändern können

Alles Inhaltliche über den Generator: Angaben, Farben, Logobreite und Vorlage. Am Code selbst sollten Sie möglichst wenig ändern — jede nachträgliche Anpassung im Editor kann genau die Eigenheiten wieder einführen, die der Generator umgeht. Wer doch eingreift, ändert Farbwerte und Texte, nicht die Struktur.

1. Änderung im Generator vornehmen und die Signatur neu kopieren.
2. Signaturfeld im Mailprogramm vollständig leeren.
3. Neue Fassung einfügen und in einer Testmail an sich selbst prüfen.
4. Testmail zusätzlich auf dem Handy öffnen — dort fallen zu grosse Logos zuerst auf.

Wenn eine Signatur beim Empfänger anders ankommt als bei Ihnen, liegt es fast immer am Programm und nicht am Code. Die typischen Ursachen stehen unter warum eine Signatur nicht angezeigt wird.