# E-Mail-Signatur-HTML-Generator

Erzeugt eine saubere, kopierfertige HTML-E-Mail-Signatur, die in Gmail, Outlook und Apple Mail korrekt dargestellt wird — mit Avatar/Logo, Social Icons (automatisch aus Ihren Links erkannt), Akzentfarbe, Hell/Dunkel/Auto-Theme und einem tabellenbasierten, E-Mail-sicheren Layout mit Inline-Styles. HTML kopieren und direkt in den Mail-Client einfügen.

> Kanonische Seite: https://elysiatools.com/de/tools/email-signature-html-builder

- **Kategorie:** Design

- **Schlagwörter:** E-Mail-Signatur, HTML-Signatur, Gmail-Signatur, Outlook-Signatur, Apple Mail, Visitenkarte, Branding, Social Icons, Dunkelmodus, Inline-CSS, Mail-Client, Fußzeile

## Überblick

Erstellen Sie eine professionelle E-Mail-Signatur, die überall funktioniert:

1. **Daten ausfüllen** — Name, Position, Firma, E-Mail, Telefon, Website, Adresse und eine öffentliche Foto-/Logo-URL.
2. **Layout wählen** — nebeneinander (Foto links mit Akzent-Trennbalken) oder gestapelt (nur Text). Ohne URL wird das Foto ausgeblendet.
3. **Gestalten** — Akzentfarbe, web-sichere Schrift und Hell/Dunkel/Auto-Theme (Auto fügt einen `prefers-color-scheme`-Block ein, den Apple Mail beachtet).
4. **Soziale Links** — LinkedIn, X, GitHub, Instagram, Facebook oder YouTube einfügen; Icons werden als E-Mail-sichere Inline-SVG-Data-URIs gerendert.
5. **HTML kopieren** — eigenständige tabellarische Signatur mit Inline-Styles für Gmail/Outlook/Apple Mail.

Alles läuft lokal.

## Eingaben

- **Vollständiger Name** (text): Jane Doe
- **Position** (text): Product Manager
- **Unternehmen** (text): Acme Inc.
- **E-Mail** (text): jane@acme.com
- **Telefon** (text): +1 555 123 4567
- **Webseite** (text): acme.com
- **Adresse** (text): 123 Market St, San Francisco, CA
- **Foto-/Logo-URL** (text): https://…/avatar.png
- **Soziale Netzwerke** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **Akzentfarbe** (color)
- **Schriftart** (select)
- **Layout** (select)
- **Theme** (select)

## Wann verwenden

- Wenn Sie eine professionelle E-Mail-Signatur benötigen, die in verschiedenen Mail-Clients wie Outlook, Gmail und Apple Mail einheitlich aussieht.
- Wenn Sie Social-Media-Icons und ein Logo ohne externe Abhängigkeiten oder fehlerhafte Formatierungen in Ihre E-Mail-Fußzeile einbinden möchten.
- Wenn Sie eine Signatur erstellen wollen, die sich automatisch an den Hell- oder Dunkelmodus des Empfängers anpasst.

## Funktionsweise

- Geben Sie Ihre persönlichen Daten wie Name, Position, E-Mail-Adresse und optional eine Bild-URL für Ihr Logo ein.
- Fügen Sie Ihre Social-Media-Links hinzu, die automatisch erkannt und als E-Mail-sichere Inline-SVG-Icons eingebunden werden.
- Wählen Sie das Layout (nebeneinander oder gestapelt), die Akzentfarbe sowie das gewünschte Theme (Hell, Dunkel oder Auto).
- Kopieren Sie den generierten HTML-Code mit den integrierten Inline-Styles und fügen Sie ihn direkt in die Signatureinstellungen Ihres Mail-Clients ein.

## Anwendungsfälle

- Erstellung einer einheitlichen, markenkonformen E-Mail-Signatur für Freiberufler und Selbstständige.
- Generierung von minimalistischen Nur-Text-Signaturen für Entwickler mit direktem Link zum GitHub-Profil.
- Schnelles Erstellen von E-Mail-Fußzeilen mit Firmenlogo und Social-Media-Icons für Vertriebsmitarbeiter.

## Häufig gestellte Fragen

### Unterstützt die Signatur den Dark Mode?

Ja, das 'Auto'-Theme fügt einen Medienblock für den Dunkelmodus hinzu, den Clients wie Apple Mail unterstützen. Alternativ können Sie ein festes dunkles Theme wählen.

### Welche Social-Media-Plattformen werden automatisch erkannt?

Der Generator erkennt Links zu LinkedIn, X, GitHub, Instagram, Facebook und YouTube und fügt die passenden Icons ein.

### Benötige ich HTML-Kenntnisse, um das Tool zu nutzen?

Nein, Sie tragen Ihre Daten einfach in die Eingabemaske ein und kopieren den fertigen HTML-Code per Klick.

### Warum wird mein Foto oder Logo nicht angezeigt?

Stellen Sie sicher, dass Sie eine öffentlich zugängliche Bild-URL (z. B. auf Ihrem Webserver oder einem Bildhoster) verwenden.

### Funktioniert die Signatur auch in Outlook?

Ja, das tabellenbasierte Layout und die Inline-Styles sind speziell für die Kompatibilität mit Outlook und anderen gängigen Mail-Clients optimiert.

## Ähnliche Tools

- [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala
- [HTML-Tag-Entferner](https://elysiatools.com/de/tools/new-html-tag-stripper): Entfernt HTML-Tags aus dem Code und extrahiert sauberen Textinhalt
- [QR-Code-Generator](https://elysiatools.com/de/tools/qr-code-generator): Erstellt QR-Codes aus URLs oder Text mit anpassbarer Größe und Farben
- [Accessibility-Heatmap-Generator](https://elysiatools.com/de/tools/accessibility-heatmap-generator): Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor
- [Barcode-Batch-Generator](https://elysiatools.com/de/tools/barcode-batch-generator): Erzeugt stapelweise Code 128, EAN-13, UPC-A, ITF-14, QR Code und Data Matrix aus CSV oder mehrzeiligem Text mit PNG-ZIP- oder PDF-Ausgabe
- [Meta-Tag-Extraktor](https://elysiatools.com/de/tools/meta-tag-extractor): Extrahiert und analysiert Meta-Tags, Open Graph, Twitter Cards und strukturierte Daten von Webseiten
- [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren.
- [Header-Entferner](https://elysiatools.com/de/tools/header-remover): Header aus CSV-Daten entfernen, um saubere Header-lose Dateien zu erstellen. Perfekt für Datenbankimporte, Datenverarbeitungs-Pipelines.

## Beispiele

- [HTML-Beispiele](https://elysiatools.com/de/samples/html-viewer-samples): Beispieldateien fuer den Browser-basierten HTML-Viewer
- [HTML mit Bildern Proben](https://elysiatools.com/de/samples/html-with-images): HTML-Quellcodeproben mit Bildern zum Testen der Extraktion
- [MSG Viewer Samples](https://elysiatools.com/de/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [Textbeispiele mit Sensiblen Daten](https://elysiatools.com/de/samples/text-with-sensitive-data-samples): Text mit verschiedenen Arten sensibler Daten zum Testen der Datenmaskierung (Telefonnummern, E-Mails, Ausweise, Bankkarten)

## Verwandte Inhalte

- [HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools](https://elysiatools.com/de/hubs/html-convert): Vergleichen Sie HTML-Bereinigung, Attribut- und Bildquellen-Extraktion, HTML-zu-Markdown und HTML-zu-PDF in einem Hub für Web-Content-Konvertierungs-Workflows.
- [Werkzeuge fur Barcodes, QR-Codes und Etiketten](https://elysiatools.com/de/hubs/barcode-utility): Bunde Barcode-Generierung, QR-Erstellung und -Dekodierung, UPC/EAN-Prufung, WiFi-Freigabe per QR und druckbare Etikettenwerkzeuge in einem Hub.
- [Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung](https://elysiatools.com/de/hubs/web-accessibility-audits): Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows.
- [Tools für HTML-Extraktion, Bereinigung und Auslieferung](https://elysiatools.com/de/hubs/html-content-extraction-cleanup-and-delivery): Extrahieren Sie Links, Bilder, Tabellen und sauberen Text aus HTML und konvertieren oder rendern Sie das Ergebnis.