# Конструктор HTML-подписи для email
Создаёт чистую HTML-подпись, которую можно скопировать и которая корректно отображается в Gmail, Outlook и Apple Mail — с аватаром/логотипом, иконками соцсетей (автоопределение по ссылкам), акцентным цветом, светлой/тёмной/авто-темой и табличной вёрсткой с инлайн-стилями. Скопируйте HTML и вставьте в почтовый клиент.
> Каноническая страница: https://elysiatools.com/ru/tools/email-signature-html-builder
- **Категория:** Design
- **Ключевые слова:** подпись email, HTML-подпись, подпись Gmail, подпись Outlook, Apple Mail, визитка, брендинг, иконки соцсетей, тёмная тема, инлайн CSS, почтовый клиент, подвал
## Обзор
Создайте профессиональную подпись, работающую во всех клиентах:
1. **Заполните данные** — имя, должность, компанию, почту, телефон, сайт, адрес и публичный URL фото/логотипа.
2. **Выберите макет** — бок о бок (фото слева с акцентной полосой) или сверху вниз (только текст). Фото скрывается, если URL нет.
3. **Оформление** — акцентный цвет, веб-безопасный шрифт и тема: Светлая/Тёмная/Авто (Авто добавляет блок `prefers-color-scheme`, который чтёт Apple Mail).
4. **Добавьте соцсети** — вставьте ссылки LinkedIn, X, GitHub, Instagram, Facebook или YouTube; иконки рендерятся как inline-SVG data-URI, безопасные для почты.
5. **Скопируйте HTML** — самодостаточная табличная подпись с инлайн-стилями для Gmail/Outlook/Apple Mail.
Всё работает локально.
## Входные данные
- **Полное имя** (text): Jane Doe
- **Должность** (text): Product Manager
- **Компания** (text): Acme Inc.
- **Эл. почта** (text): jane@acme.com
- **Телефон** (text): +1 555 123 4567
- **Сайт** (text): acme.com
- **Адрес** (text): 123 Market St, San Francisco, CA
- **URL фото/логотипа** (text): https://…/avatar.png
- **Соцсети** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **Акцентный цвет** (color)
- **Шрифт** (select)
- **Макет** (select)
- **Тема** (select)
## Когда использовать
- Когда нужно создать профессиональную подпись для деловой переписки без написания HTML-кода вручную.
- Когда требуется настроить адаптивную подпись с поддержкой темной темы и корректным отображением в Outlook, Gmail и Apple Mail.
- Когда необходимо быстро добавить в подпись кликабельные контакты, логотип и иконки популярных социальных сетей.
## Как это работает
- Введите свои контактные данные, должность, название компании и добавьте ссылку на изображение или логотип.
- Настройте внешний вид: выберите макет (бок о бок или сверху вниз), шрифт, акцентный цвет и тему оформления (светлую, тёмную или автоматическую).
- Укажите ссылки на профили в соцсетях (LinkedIn, X, GitHub и др.) для автоматической генерации безопасных inline-SVG иконок.
- Скопируйте сгенерированный HTML-код и вставьте его в настройки подписи вашего почтового клиента.
## Сценарии использования
- Создание единого стандарта корпоративных подписей для сотрудников компании.
- Оформление личной визитки в письмах для фрилансеров и независимых специалистов.
- Быстрое обновление контактных данных и ссылок на социальные сети в существующей подписи.
## Частые вопросы
### Будет ли подпись корректно отображаться в Outlook?
Да, генератор использует табличную верстку и инлайн-стили, что гарантирует правильное отображение в Outlook, Gmail и Apple Mail.
### Как добавить логотип или аватар в подпись?
Загрузите изображение на любой публичный хостинг и вставьте прямую ссылку на него в поле «URL фото/логотипа».
### Как работает автоматическая тема (Auto)?
Она добавляет медиа-запрос prefers-color-scheme, благодаря чему подпись автоматически адаптируется под темную или светлую тему в поддерживаемых клиентах, например Apple Mail.
### Нужно ли отдельно загружать иконки соцсетей?
Нет, инструмент автоматически распознает ссылки на популярные платформы и встраивает их иконки в виде безопасных inline-SVG.
### Где хранится введенная мной информация?
Все данные обрабатываются локально в вашем браузере и не отправляются на внешние серверы.
## Связанные инструменты
- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков
- [Удалитель HTML-тегов](https://elysiatools.com/ru/tools/new-html-tag-stripper): Удаляет HTML-теги из кода и извлекает чистый текстовый контент
- [Генератор QR-кода](https://elysiatools.com/ru/tools/qr-code-generator): Генерирует QR-коды из URL или текста с настраиваемым размером и цветами
- [Генератор heatmap доступности](https://elysiatools.com/ru/tools/accessibility-heatmap-generator): Создает тепловую карту доступности по скриншоту или HTML и предлагает патч-цвета
- [Пакетный генератор кодов](https://elysiatools.com/ru/tools/barcode-batch-generator): Пакетно создает Code 128, EAN-13, UPC-A, ITF-14, QR Code и Data Matrix из CSV или многострочного текста с экспортом в PNG ZIP или PDF
- [Извлекатель Meta-тегов](https://elysiatools.com/ru/tools/meta-tag-extractor): Извлекает и анализирует meta-теги, Open Graph, Twitter Cards и структурированные данные с веб-страниц
- [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную.
- [Удалитель Заголовков](https://elysiatools.com/ru/tools/header-remover): Удалить заголовки из данных CSV для создания чистых файлов без заголовков. Идеально для импорта баз данных, конвейеров обработки данных.
## Примеры
- [Образцы HTML](https://elysiatools.com/ru/samples/html-viewer-samples): Образцы файлов для браузерного HTML просмотрщика
- [Примеры HTML с изображениями](https://elysiatools.com/ru/samples/html-with-images): Примеры исходного кода HTML с изображениями для тестирования извлечения
- [MSG Viewer Samples](https://elysiatools.com/ru/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [Примеры текста с конфиденциальными данными](https://elysiatools.com/ru/samples/text-with-sensitive-data-samples): Текст, содержащий различные типы конфиденциальных данных для тестирования маскирования данных (телефоны, электронная почта, ID-карты, банковские карты)
## Связанные материалы
- [Инструменты извлечения, очистки и экспорта HTML в Markdown/PDF](https://elysiatools.com/ru/hubs/html-convert): Сравните инструменты очистки HTML, извлечения атрибутов и ссылок на изображения, HTML в Markdown и HTML в PDF в одном хабе для веб-конвертации контента.
- [Инструменты для штрихкодов, QR-кодов и этикеток](https://elysiatools.com/ru/hubs/barcode-utility): Соберите в одном хабе инструменты для генерации штрихкодов, создания и декодирования QR-кодов, проверки UPC/EAN, WiFi QR и печатных этикеток.
- [Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov](https://elysiatools.com/ru/hubs/web-accessibility-audits): Proveryayte problemy WCAG, porjadok chteniya dlya screen reader, oshibki kontrasta, riski dlya narushenij cvetovogo zreniya i dostupnye cvetovye resheniya v odnom hube dlya web-accessibility workflow.
- [Инструменты извлечения, очистки и доставки HTML](https://elysiatools.com/ru/hubs/html-content-extraction-cleanup-and-delivery): Извлекайте ссылки, изображения, таблицы и чистый текст из HTML, затем конвертируйте или рендерьте результат.