HTML-коды смайликов: как вставлять эмодзи в код сайта и чаты

Смайлики стали неотъемлемой частью цифровой коммуникации — от личных сообщений до корпоративных сайтов. Но как добавить их в HTML-код, если стандартные методы копирования не работают? Например, при вёрстке страницы или написании email-рассылки эмодзи могут отображаться как кракозябры или вовсе исчезать. Решение простое: использовать специальные HTML-сущности или Unicode-коды для смайликов.

В этой статье вы найдёте полный актуальный список HTML-кодов для 200+ популярных смайликов, включая эмодзи лиц, жестов, символов и предметов. Мы разберём, как их правильно вставлять в код сайта, избегая типичных ошибок, и покажем примеры использования в разных сценариях — от комментариев на WordPress до email-писем. А для веб-разработчиков приведём способы динамической подгрузки эмодзи через JavaScript.

Почему обычные смайлики не работают в HTML?

Проблема кроется в кодировке. Когда вы копируете смайлик 😊 напрямую в HTML-файл, браузер может интерпретировать его как набор байтов в неподходящей кодировке (например, Windows-1251 вместо UTF-8). В результате вместо улыбающегося лица пользователь увидит что-то вроде 😊 или пустой квадрат.

Решение — использовать HTML-сущности (например, 😊 для 😊) или Unicode-экранирование (например, \u{1F60A} в JavaScript). Эти методы гарантируют корректное отображение на любом устройстве, независимо от шрифтов и кодировки страницы.

⚠️ Внимание: Если ваш сайт использует кодировку ISO-8859-1 или Windows-1251, смайлики в формате Unicode отобразятся неправильно. Проверьте тег <meta charset="UTF-8"> в шапке HTML-документа.

• 🔹 Проблема 1: Смайлики превращаются в ?? или квадраты → нужно использовать HTML-коды.
• 🔹 Проблема 2: Эмодзи отображаются слишком крупно или смещают вёрстку → требуется CSS-корректировка.
• 🔹 Проблема 3: В email-рассылках смайлики не показываются → используйте только базовые символы (❤️, ☺) или картинки.

Топ-5 способов вставить смайлики в HTML

Существует несколько надёжных методов добавления эмодзи в код. Выбор зависит от задачи:

1. HTML-сущности (например, 😀 для 😀) — универсальный способ, работает везде.
2. Unicode-символы (например, U+1F600) — удобно для JavaScript.
3. CSS-псевдоэлементы (content: "\1F60A") — для динамического добавления.
4. Шрифты с эмодзи (например, Twemoji от Twitter) — для единообразия на всех платформах.
5. SVG или PNG — если нужна анимация или кастомный дизайн.

Для большинства задач достаточно первых двух методов. Например, чтобы добавить сердечко ❤️ в текст, используйте:

<p>Мы любим своих клиентов! &#10084;&#65039;</p>

Полная таблица HTML-кодов для популярных смайликов

Ниже представлены коды для самых востребованных эмодзи, сгруппированных по категориям. Для удобства мы указали как десятичные HTML-сущности (например, 😊), так и шестнадцатеричные Unicode (например, U+1F60A).

Смайлик	Описание	HTML-код (десятичный)	Unicode
😊	Улыбающееся лицо с улыбающимися глазами	😊	U+1F60A
❤️	Красное сердечко	❤️	U+2764 U+FE0F
👍	Жест "класс" (like)	👍	U+1F44D
🎉	Праздничные хлопушки	🎉	U+1F389
🚀	Ракeta	🚀	U+1F680

Полный список из 3000+ эмодзи можно найти на официальном сайте Unicode Consortium. Для быстрого поиска используйте комбинацию Ctrl+F и введите ключевое слово (например, "cat" для кошек).

Как вставить смайлики в JavaScript?

В JavaScript эмодзи можно добавлять тремя способами:

• 📜 Прямая вставка: let smile = "😊"; — работает, если файл сохранён в UTF-8.
• 📜 Unicode-экранирование: let smile = "\u{1F60A}"; — универсальный метод (ES6+).
• 📜 Из HTML-сущности: let smile = document.createTextNode("😊"); — для динамического добавления в DOM.

Пример динамического добавления смайлика на страницу:

// Создаём элемент с эмодзи
const emoji = document.createElement("span");
emoji.innerHTML = "Привет! 😊";

// Добавляем в тело страницы
document.body.appendChild(emoji);

⚠️ Внимание: При использовании innerHTML для вставки эмодзи из пользовательского ввода (например, комментариев) обязательно применяйте санитайзеры (например, DOMPurify), чтобы избежать XSS-атак.

Смайлики в email-рассылках: что работает, а что нет

Не все почтовые клиенты корректно отображают эмодзи. По нашему тестированию (2026 год):

• ✅ Работает везде: Базовые символы (☺, ♥, ★) — поддерживаются даже в устаревших клиентах.
• ⚠️ Частично работает: Цветные эмодзи (😊, ❤️) — отображаются в Gmail, Apple Mail, но могут не показываться в Outlook 2013.
• ❌ Не работает: Новые эмодзи (например, 🫠) — не поддерживаются в Outlook и некоторых мобильных клиентах.

Рекомендации для email-маркетологов:

1. Используйте только эмодзи из базового набора (до 2015 года).
2. Тестируйте рассылку в Litmus или Email on Acid перед отправкой.
3. Добавляйте alt-текст для эмодзи (например, alt="улыбка"), если они вставлены как картинки.

Как вставить эмодзи в тему письма в Mailchimp?

В Mailchimp эмодзи в теме письма поддерживаются только в формате текста. Скопируйте смайлик напрямую (например, 🎉) или используйте Unicode-символ (U+1F389). Избегайте HTML-кодов — они отобразятся как текст.

Ошибки при работе со смайликами в HTML и как их избежать

Даже опытные разработчики сталкиваются с проблемами при вставке эмодзи. Вот самые распространённые ошибки и их решения:

Ошибка	Причина	Решение
Эмодзи отображается как ��	Неверная кодировка файла (не UTF-8)	Сохраните файл в UTF-8 без BOM
Смайлик слишком большой и ломает вёрстку	Браузеры по-разному масштабируют эмодзи	Добавьте CSS: font-size: 1em;
Эмодзи выглядит по-разному в Safari и Chrome	Разные шрифты эмодзи на платформах	Используйте шрифт Twemoji или SVG

Для единообразия внешнего вида эмодзи на всех устройствах рекомендуем подключить библиотеку Twemoji от Twitter:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/twemoji.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/twemoji.min.js"></script>
<script>
twemoji.parse(document.body);
</script>

Где взять редкие смайлики и кастомные эмодзи?

Если стандартных эмодзи недостаточно, можно использовать:

• 🎨 Кастомные SVG-эмодзи: Сервисы вроде EmojiOne или OpenMoji предлагают бесплатные наборы.
• 🖼️ PNG-спрайты: Сайты типа IconFinder или Flaticon имеют коллекции эмодзи в формате изображений.
• 🔧 CSS-библиотеки: Font Awesome включает иконки, которые можно стилизовать под эмодзи.

Пример подключения кастомного эмодзи через SVG:

<img src="custom-emoji.svg" alt="кастомный смайлик" width="24" height="24">

⚠️ Внимание: Использование кастомных эмодзи может увеличить время загрузки страницы. Оптимизируйте изображения через TinyPNG или SVGO.

Скачать SVG/PNG в высоком разрешении

Оптимизировать размер файла

Добавить alt-текст для доступности

Протестировать отображение на ретина-экранах

-->

FAQ: Частые вопросы о HTML-кодах смайликов

Можно ли использовать эмодзи в атрибуте title?

Да, но с оговорками. Например, <span title="😊 Подсказка"> отработает в современных браузерах, но в IE11 может отобразиться как текст. Для надёжности используйте только базовые символы (☺, ★).

Почему эмодзи в CSS через content: "\1F60A" не работают?

Проблема в экранировании. Для CSS нужно указывать код без префикса U+ и с обратным слешем: content: "\1F60A";. Также проверьте, что шрифт страницы поддерживает эмодзи (например, Segoe UI Emoji на Windows).

Как добавить анимированные эмодзи на сайт?

Стандартные эмодзи статичные. Для анимации используйте:

• GIF-изображения (например, с Giphy).
• Lottie-анимацию (библиотека Bodymovin).
• CSS-анимацию для SVG-эмодзи.

Где найти HTML-коды для флагов стран?

Флаги кодируются парой региональных символов. Например, флаг России — 🇷🇺 (🇷🇺). Полный список: Unicode Flags.

Как вставить эмодзи в JSON-файл?

В JSON эмодзи нужно экранировать как Unicode: "emoji": "\uD83D\uDE0A" (для 😊). Альтернатива — использовать суррогатные пары: "\ud83d\ude0a". Проверьте валидность через JSONLint.