Softonic

Генератор favicon из букв и эмодзи

Создайте простой и узнаваемый favicon без подготовки исходного изображения. Введите одну или две буквы либо выберите один эмодзи, затем настройте форму и цвет фона. Для текстового дизайна можно также выбрать цвет символов и стиль шрифта, а эмодзи сохраняет исходный вид браузера. Предпросмотр размером 512 px обновляется прямо в браузере. Готовый архив содержит маленькие значки для браузеров, мобильные иконки и файлы конфигурации, необходимые для подключения дизайна к сайту. Ничего не загружается на сервер, AI не используется.

Как создать favicon

  1. 1

    Выберите содержимое

    Введите одну или две буквы для лаконичного буквенного знака либо используйте один эмодзи.

  2. 2

    Оформите дизайн

    Выберите квадрат, скруглённый квадрат или круг и задайте фон. Для текста выберите цвет символов и шрифт; эмодзи сохраняет исходный вид.

  3. 3

    Проверьте предпросмотр

    Оцените вариант 512 px и убедитесь, что дизайн останется понятным после уменьшения до значка вкладки размером 16 px.

  4. 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 опубликованы по ожидаемым путям, затем очистите кэш или проверьте сайт в приватном окне. Поисковые системы и некоторые платформы обновляют иконки по собственному расписанию.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Генератор линованной бумаги

Создавайте линованную бумагу для печати бесплатно. Выберите узкую, широкую или стандартную линовку, задайте расстояние между строками в мм, размер листа и линию поля, затем распечатайте или скачайте SVG.

Инструмент доступен на других языках