Pugofka / Tools / Генераторы
Генератор фавиконок для сайта
Создайте favicon.ico, PNG, Apple Touch Icon и webmanifest из картинки или текста. Изображение остаётся в браузере.
Или перетащите файл сюда.
Какие фавиконки нужны сайту в 2026 году
Практичный набор: favicon.ico для совместимости, PNG 16 и 32 px для вкладок, apple-touch-icon.png для iOS и иконки 192/512 px с site.webmanifest для Android и PWA. Если у вас есть простой SVG, сохраните и его: браузер сможет масштабировать векторную иконку без потери качества.
Устаревшие msapplication и browserconfig.xml в этот набор не входят. Для узнаваемого значка важнее проверить, что он читается уже в размере 16 px.
Как подключить фавиконку
Скачайте ZIP, распакуйте файлы в корень сайта и вставьте выданный HTML-сниппет в <head>. Если файлы лежат в другом каталоге, измените пути в сниппете и site.webmanifest на фактические.
После публикации откройте файлы напрямую по URL и проверьте вкладку браузера. Браузеры долго кешируют фавиконки: при изменении добавьте версию к адресу файла, например ?v=2, или дождитесь обновления кеша.
Почему картинка не загружается на сервер
Файл читается через FileReader, размеры рендерятся через Canvas, ICO и ZIP собираются в вашем браузере. Изображение не отправляется в API Pugofka и не попадает в аналитику. Это можно проверить во вкладке Network инструментов разработчика.
Для SVG разрешён только простой файл без внешних ссылок и активного содержимого. Так встроенные в исходник ресурсы не вызовут сетевые запросы.
Размеры для разных платформ
| Назначение | Размер | Файл |
|---|---|---|
| Вкладка браузера | 16 / 32 px | ICO, PNG, SVG |
| iOS | 180 px | apple-touch-icon.png |
| Android / PWA | 192 / 512 px | PNG + webmanifest |
Apple Touch Icon создаётся с непрозрачным фоном: прозрачная исходная картинка компонуется поверх выбранного цвета.
Частые вопросы
- Почему фавиконка не обновилась?
- Браузер мог сохранить старую версию. Проверьте URL файла напрямую, затем добавьте версию к адресу и обновите страницу.
- Обязателен ли файл favicon.ico?
- Для современных браузеров достаточно PNG или SVG, но ICO полезен для совместимости со старыми браузерами и отдельными сервисами.
- Нужна ли прозрачность?
- Для значка вкладки прозрачность может быть полезна. Apple Touch Icon создаётся с непрозрачным фоном, чтобы значок корректно выглядел на iOS.
- Что такое site.webmanifest?
- Это JSON-файл с названием сайта и адресами иконок для установки сайта на главный экран и PWA-сценариев.
- Можно ли сделать фавиконку из эмодзи?
- Да. Переключитесь на режим «Из текста», введите эмодзи и выберите фон. Вид эмодзи зависит от шрифта и операционной системы.
- Отправляется ли исходная картинка на Pugofka?
- Нет. FileReader, Canvas, сборка ICO и ZIP работают в браузере; сервер не получает изображение.
Нужна помощь с сайтом?
Поможем разобраться с технической задачей и оценить её решение.