Генератор фавиконок

Создаёт favicon.ico, PNG всех размеров и значки для iPhone и Android из текста, эмодзи или логотипа — всё сразу.

1. Введите текст или выберите картинку

Введите символы для значка (можно эмодзи) или выберите картинку, например логотип.

Из чего сделать

До 3 символов. Значок показывается очень мелко, поэтому лучше 1–2 символа.

Шрифт

2. Выберите форму и цвета

Выберите форму и цвет фона и размер содержимого. Результат сразу виден в предпросмотре.

Форма

Цвет фона

#f97316

Значок для экрана «Домой» на iPhone (apple-touch-icon) с прозрачностью выглядит чёрным, поэтому его фон заливается цветом, выбранным выше.

Цвет текста

#ffffff
100%

Цвета в тёмной теме

Меняется только favicon.svg. В режиме «Авто» яркость инвертируется, только если цвет плохо виден на тёмном экране.

3. Проверьте и сохраните

Посмотрите, как значок выглядит во вкладке браузера и на главном экране, и сохраните всё одним ZIP-архивом.

Введите текст — здесь появится предпросмотр

Светлый
Тёмный
Мой сайт

Вкладка браузера (светлая и тёмная тема)

Мой сайт
Мой сайт

Записывается в site.webmanifest как название при добавлении на главный экран.

Добавляет 64, 128 и 256 px — они нужны, когда значок показывается крупно, например в ярлыках на рабочем столе Windows. Файл станет больше.

HTML для сайта

Положите файлы из ZIP в корень сайта (/) и вставьте этот HTML внутрь <head>.

Показать HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Файлы в ZIP-архиве
  • favicon.ico (16 / 32 / 48)
  • favicon.svg
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest
  • favicon-html.txt

Всё происходит на этом устройстве. Изображения никуда не загружаются.

Пригодилось? Будем рады, если поделитесь

Что-то не работает или есть идея, как сделать лучше?

Сообщить о проблемеПредложить улучшение

Как пользоваться

  1. 1. Введите текст

    Когда выбрано «Текст», коснитесь поля «Текст значка» и введите 1–3 символа. Можно и эмодзи. Начертание букв выбирается ниже, в разделе «Шрифт».

  2. 2. Выберите форму и цвета

    Коснитесь «Выбрать форму и цвета на весь экран», чтобы открыть редактор. В панели внизу на вкладке «Форма» коснитесь «Круг», а на вкладке «Цвет» — цветного кружка для фона. Предпросмотр в центре сразу покажет, как значок выглядит на светлом и тёмном экране.

  3. 3. Значок из картинки

    Чтобы сделать значок из логотипа или другой картинки, коснитесь «Картинка» вверху и выберите её через «Выбрать файлы». Откроется редактор на весь экран, и картинка поместится в значок целиком. Чтобы растянуть её до краёв, коснитесь «Заполнить» в пункте «Размещение» в панели внизу.

  4. 4. Сохраните всё сразу

    Коснитесь «Скачать всё в ZIP» в разделе «Проверьте и сохраните» — все файлы сохранятся одним ZIP-архивом. HTML для сайта можно скопировать кнопкой «Копировать HTML» ниже.

Когда пригодится

  • Значок для своего сайта — за минуту

    Значок для вкладки блога, личного сайта или своего веб-приложения можно сделать из одной буквы или эмодзи за несколько секунд. Графический редактор не нужен.

    Тем, кто делает сайты сам

  • Все нужные размеры сразу

    favicon.ico, PNG 16/32 px и значки для iPhone и Android создаются за один раз и сохраняются одним ZIP-архивом. Не нужно экспортировать каждый размер отдельно.

    Веб-разработчикам и верстальщикам

  • Из логотипа магазина или компании

    Достаточно выбрать картинку с логотипом — она подстроится под размеры для вкладки и главного экрана. Прозрачный фон можно сохранить.

    Магазинам и небольшим компаниям

  • Для учебных HTML-страниц

    К файлам прилагается готовый HTML, поэтому понятно, какой файл куда положить. Подходит для страниц, которые делают на уроках и для практики.

    Тем, кто учит программирование, и преподавателям

Что стоит знать заранее

  • Мелкий текст и фотографии при 16 px сливаются и становятся неразборчивыми. Лучше взять знак с чёткими формами или 1–2 символа.
  • Картинки для плиток Windows инструмент не создаёт. Современным браузерам и смартфонам хватает файлов, которые он делает.
  • Чтобы сначала обрезать поля вокруг логотипа, удобно воспользоваться «Обрезать изображение».

Какие файлы и размеры нужны для фавиконки

Фавиконка (favicon) — это значок сайта, который показывается во вкладке браузера, в закладках, в результатах поиска и на главном экране смартфона. В каждом месте используется свой размер, поэтому обычно из одного рисунка готовят несколько файлов. Этот инструмент сразу создаёт всё, что нужно современным браузерам и смартфонам, и готовит HTML для вставки на сайт.

favicon.ico — формат, в котором в одном файле хранятся три размера: 16, 32 и 48 px. Его показывают и старые браузеры, и ярлыки Windows. Значок для экрана «Домой» на iPhone (apple-touch-icon) не может быть прозрачным, а углы iPhone скругляет сам, поэтому здесь он делается квадратным с залитым фоном. favicon.svg умеет менять цвета под тёмную тему; его используют во вкладках Chrome, Firefox и Edge.

Создаваемые файлы и где они используются
РазмерГде используется
favicon.ico16, 32, 48 px (по желанию 64, 128, 256 px)Вкладки и закладки браузера, Windows
favicon.svg—Вкладки браузера (в тёмной теме меняются цвета)
favicon-16x16.png / favicon-32x32.png16, 32 pxВкладки браузера
apple-touch-icon.png180 pxЭкран «Домой» на iPhone и iPad
android-chrome-192x192.png / 512x512.png192, 512 pxГлавный экран Android, установка как приложения
site.webmanifest—Сообщает Android значок, название и цвет

Частые вопросы

Ответы на частые вопросы о том, как сделать фавиконку и где её разместить.

Картинка куда-нибудь отправляется?

Нет. Всё — от загрузки картинки до рисования значка и упаковки в ZIP — происходит в браузере на этом устройстве. Выбранная картинка и введённый текст никуда не отправляются.

Какие картинки подходят лучше всего?

Квадратные, с чёткими формами. При 16 px значок совсем крошечный, и мелкий текст или фото сливаются. Лучше оставить только знак из логотипа или сделать значок из 1–2 символов в режиме «Текст». Для вытянутых картинок в пункте «Размещение» можно выбрать «Вписать» или «Заполнить».

Можно сделать фавиконку из эмодзи?

Да. Введите эмодзи в поле «Текст значка» — получится значок с эмодзи. Рисунок эмодзи будет таким, как на вашем устройстве (iPhone, Android, Windows и т. д.).

Куда положить готовые файлы?

Распакуйте ZIP и положите все файлы в корень сайта (туда, где открывается https://example.com/favicon.ico). Затем скопируйте «HTML для сайта» и вставьте его внутрь <head> на каждой странице.

Хватит одного favicon.ico?

Для вкладки браузера достаточно одного favicon.ico. Если хотите, чтобы значок красиво выглядел и при добавлении на главный экран смартфона, положите все файлы из ZIP и вставьте HTML.

Можно сделать прозрачный фон?

Да. Включите «Прозрачный фон» — фон и всё за пределами формы станут прозрачными. Только у значка для экрана «Домой» на iPhone (apple-touch-icon.png) прозрачные места выглядят чёрными, поэтому его фон заливается цветом из пункта «Цвет фона».

Подходит ли для WordPress?

Да. В WordPress откройте «Внешний вид» → «Настроить» → «Свойства сайта» и в пункте «Иконка сайта» выберите android-chrome-512x512.png из ZIP-архива (нужна картинка не меньше 512 px).

Поменял фавиконку, а она не обновляется

Браузеры иногда надолго запоминают фавиконку. Если после перезагрузки страницы ничего не изменилось, очистите кэш браузера или проверьте чуть позже.

Можно сделать фавиконку в SVG?

Да. В ZIP-архиве есть favicon.svg. В тёмной теме он переключается на цвета из пункта «Цвета в тёмной теме» (в режиме «Авто» яркость инвертируется только у плохо видимых цветов). Текст встраивается картинкой в выбранном шрифте, а SVG только раскрашивает его.

Это бесплатно?

Да, бесплатно. Регистрация не нужна, рекламы нет. Количество значков не ограничено.

Другие инструменты