Генератор favicon из букв и эмодзи
Создайте простой и узнаваемый favicon без подготовки исходного изображения. Введите одну или две буквы либо выберите один эмодзи, затем настройте форму и цвет фона. Для текстового дизайна можно также выбрать цвет символов и стиль шрифта, а эмодзи сохраняет исходный вид браузера. Предпросмотр размером 512 px обновляется прямо в браузере. Готовый архив содержит маленькие значки для браузеров, мобильные иконки и файлы конфигурации, необходимые для подключения дизайна к сайту. Ничего не загружается на сервер, AI не используется.
Как создать favicon
-
1
Выберите содержимое
Введите одну или две буквы для лаконичного буквенного знака либо используйте один эмодзи.
-
2
Оформите дизайн
Выберите квадрат, скруглённый квадрат или круг и задайте фон. Для текста выберите цвет символов и шрифт; эмодзи сохраняет исходный вид.
-
3
Проверьте предпросмотр
Оцените вариант 512 px и убедитесь, что дизайн останется понятным после уменьшения до значка вкладки размером 16 px.
-
4
Скачайте и установите
Скачайте локально созданный комплект favicon, добавьте файлы на сайт и вставьте или адаптируйте прилагаемый фрагмент для head.
Что входит в комплект favicon
Один дизайн favicon должен хорошо выглядеть в разных местах, от крошечной вкладки браузера до главного экрана телефона. Генератор отрисовывает дизайн в практичных размерах ниже и упаковывает файлы локально в браузере.
| Файл | Размер или содержимое | Основное назначение |
|---|---|---|
favicon.ico |
Кадры 16, 32 и 48 px | Вкладки, закладки и программы, которые запрашивают ICO |
favicon-16x16.png |
16 × 16 px | Маленький favicon для браузера |
favicon-32x32.png |
32 × 32 px | Стандартный favicon для браузера |
apple-touch-icon.png |
180 × 180 px | Сенсорная иконка Apple |
android-chrome-192x192.png |
192 × 192 px | Меньшая иконка веб-приложения для Android |
android-chrome-512x512.png |
512 × 512 px | Большая иконка веб-приложения |
mstile-150x150.png |
150 × 150 px | Изображение плитки Microsoft |
site.webmanifest |
Манифест JSON | Ссылки на иконки Android для браузеров с поддержкой манифеста веб-приложения |
browserconfig.xml |
Конфигурация XML | Ссылка на изображение и цвет плитки Microsoft |
favicon-head.html |
Фрагмент HTML | Готовые к копированию ссылки на иконки, манифест и конфигурацию браузера |
Сделайте favicon различимым даже при 16 px
Favicon не должен быть уменьшенной копией плаката. Тонкие детали, длинные слова и слабые различия цветов быстро исчезают в масштабе вкладки. Одна жирная буква, короткий знак из двух букв или простой эмодзи обычно узнаваемее сложной композиции.
- Обеспечьте высокий контраст между символом и фоном.
- Оставьте свободное место вокруг букв или эмодзи, чтобы маски платформ не сжимали дизайн.
- Сравните квадрат, скруглённый квадрат и круг и выберите самый ясный силуэт.
- Проверяйте маленькие экспортированные иконки, а не только предпросмотр 512 px. Удачный крупный дизайн может стать нечитаемым при 16 px.
- Протестируйте установленный favicon в нескольких браузерах на светлом и тёмном фоне интерфейса.
Добавьте созданные файлы на сайт
Сохраните имена файлов и разместите их там, где их ожидает прилагаемый код для head, обычно в корне сайта. Вставьте код в <head> каждого шаблона страницы. Если статические ресурсы обслуживаются из другого каталога или через CDN, перед публикацией измените пути в коде, манифесте и конфигурации браузера.
Прилагаемые файлы задают ссылки на иконки, но сами по себе не делают сайт устанавливаемым прогрессивным веб-приложением. Для установки могут потребоваться дополнительные поля манифеста, защищённый хостинг и выполнение условий конкретного браузера.
Часто задаваемые вопросы
Да. Введите одну или две буквы, затем выберите форму, цвет фона, цвет символов и стиль шрифта. Короткий текст выбран намеренно, поскольку он лучше читается в маленьком favicon.
Да. Выберите один эмодзи, форму вокруг него и цвет фона. Эмодзи сохраняет исходный вид браузера, поэтому может выглядеть по-разному в разных ОС и браузерах. Проверьте предпросмотр перед скачиванием. Сложные эмодзи могут поддерживаться не везде.
Да. Комплект содержит favicon.ico с кадрами 16, 32 и 48 px, отдельные PNG размером 16 и 32 px и более крупные иконки для Apple, Android и Microsoft.
Генератор создаёт новый дизайн из букв, короткого текста или одного эмодзи. Конвертер Favicon служит для преобразования готового изображения PNG, JPEG или WebP в файлы favicon.
Нет. Буквы или эмодзи, отрисовка предпросмотра и сборка архива остаются в браузере. Инструмент не загружает дизайн и не получает данные с сайта.
Нет. Он лишь применяет выбранные настройки и не использует AI. Он также не определяет, нарушают ли буквы, эмодзи, цвета или готовый дизайн права на товарный знак либо другие права. Проверьте их перед коммерческим использованием.
Браузеры часто кэшируют favicon. Убедитесь, что файлы и ссылки в head опубликованы по ожидаемым путям, затем очистите кэш или проверьте сайт в приватном окне. Поисковые системы и некоторые платформы обновляют иконки по собственному расписанию.
Сопутствующие инструменты
Генератор мемов
Создавайте мемы по популярным шаблонам вроде Drake, Distracted Boyfriend или Doge либо загружайте свое изображение. Верхний и нижний текст, шрифт Impact, обводка и тень.
Генератор QR-кодов
Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.
Изменение размера изображений
Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.
Создание GIF
Преобразуйте серию изображений или короткое видео в анимированный GIF. Настройте частоту кадров, повторы и размер перед экспортом.
Генератор штрихкодов
Создавайте сканируемые 1D штрихкоды в Code 128, Code 39, EAN-13, UPC-A, ITF-14 и Codabar. Экспортируйте в PNG, SVG или PDF для печати.
WebP в JPG
Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.