Развлечения
Главная

Разделы

Размеры Математика Тулы Файлы Все инструменты Методики О проекте

Генератор favicon — полный комплект иконок для сайта

Коротко

Загрузите логотип или напишите букву — соберём весь комплект иконок для сайта: favicon.ico, PNG 16/32, apple-touch-icon 180, android-chrome 192 и 512 плюс site.webmanifest. Предпросмотр покажет, как иконка выглядит во вкладке браузера, ZIP скачается одним файлом, а HTML-код останется скопировать в head. Всё рисуется в вашем браузере.

Перетащите PNG, JPG, WebP или SVG квадратные картинки выглядят лучше — остальное аккуратно впишем.
Мой сайт — вкладка браузера ×
16×16
16
32×32
32
48×48
48
180×180
180
Предпросмотр иконки

Иконка рисуется и упаковывается в вашем браузере.

Зачем сайту весь комплект, а не один .ico

Браузеры на разных платформах запрашивают разные иконки: вкладка на десктопе — 16–32 px, ярлык на iPhone — 180 px, установка PWA на Android — 192 и 512 px. Без полного комплекта часть устройств показывает заглушку или пустую иконку — это заметно на закладках и в выдаче.

На этой странице также отвечаем на вопросы: «генератор favicon онлайн», «создать favicon из картинки», «favicon из png», «favicon.ico генератор», «favicon из эмодзи», «apple touch icon генератор», «иконки для pwa все размеры».

Как считаем

Холст 512×512 рисуется на canvas (картинка с обрезкой по центру, буква или эмодзи — с фоном, отступом и скруглением), затем ступенчатое уменьшение вдвое до каждого размера. Мультиразмерный .ico собирается вручную: ICONDIR + ICONDIRENTRY + PNG-кадры, без библиотек. Комплект упаковывается в ZIP (STORE) тоже собственной сборкой.

Ограничения и допущения

  • Иконки PNG внутри .ico — современный формат контейнера, его понимают все актуальные браузеры.
  • Цвет текста на цветном фоне — белый; для прозрачного фона буква красится цветом фона из настройки.
  • Комплект рассчитан на сайты; для нативных приложений нужны свои размеры сплэш-экранов.
Полная методика, шаги и источники

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

какие размеры favicon нужны сайту
Минимум — favicon.ico с кадрами 16, 32 и 48 px: его просят браузеры. Для iPhone нужен apple-touch-icon 180×180, для Android и PWA — android-chrome 192 и 512. Генератор делает весь набор сразу и складывает в один архив.
куда вставить favicon на сайт
Распакуйте архив в корень сайта и добавьте HTML-код из поля ниже в секцию <head> главной страницы. Код одинаковый для любых шаблонов — просто скопируйте его целиком.
можно сделать favicon из эмодзи
Да, это самый быстрый вариант без дизайна: выберите вкладку «Эмодзи», введите символ и подберите цвет фона. Иконка соберётся в тех же размерах, что и из картинки.
почему иконка выглядит размыто во вкладке
Иконка 16×16 — это очень мало пикселей. Помогают простые формы без мелких деталей: одна буква, символ или увеличенный фрагмент логотипа. Для тонких логотипов используйте отступ — предпросмотр покажет результат заранее.

Ещё на сайте

Размеры одежды и обуви Перевод размеров США ↔ Европа ↔ Россия по длине стопы Математика для вуза: линейная алгебра и статистика по шагам Определители, Гаусс и статистика — каждый шаг на виду, как в тетради Тулы: проверка железа, печать и онлайн-инструменты Проверить мышь, камеру, монитор и геймпад, настроить гитару — или собрать макет на печать Развлечения и эзотерика Лунный календарь, гадания, нумерология и помощники выбора