Генератор Favicon
НовыйВ тренде 🔥Создавайте все размеры favicon из одного изображения
Как использовать Генератор Favicon
- 1Загрузите квадратное изображение (рекомендуется PNG)
- 2Инструмент автоматически создаёт все стандартные размеры favicon
- 3Скачайте отдельные размеры или ZIP со всеми файлами
- 4Copy the HTML snippet to add favicons to your website
О Генератор Favicon
Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.
Ключевые возможности Генератор Favicon
- Генерирует шесть стандартных размеров: 16x16, 32x32, 48x48, 96x96, 180x180 и 512x512
- Включает Apple Touch Icon 180x180 для закладок на главном экране iOS
- Кнопка индивидуального скачивания для каждого размера
- Готовый HTML-сниппет с тегом link для каждого размера
- PNG-вывод с сохранением прозрачности из исходного изображения
- Мгновенная генерация в браузере — загрузка не требуется
- Лучше всего работает с квадратными изображениями 512x512 и более
- Копирование всего HTML-блока одним кликом
Поддерживаемые форматы
Входные форматы
Выходные форматы
A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.
Примеры
Добавить favicon на новый сайт
Загрузите логотип, нажмите «Создать favicon», скачайте все размеры и вставьте HTML-сниппет в head документа.
Входные данные
512x512 square logo PNG
Результат
Six PNG files (16 to 512px) plus HTML snippet
Создать Apple Touch Icon для PWA
Скачайте только размер 180x180 для тега Apple Touch Icon в манифесте Progressive Web App.
Входные данные
New brand logo PNG
Результат
Fresh set of all standard favicon sizes
Generate Apple Touch Icon for PWA
Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.
Входные данные
App icon PNG
Результат
180x180 Apple Touch Icon PNG
Типичные сценарии использования
- Добавление полного набора favicon в новый проект сайта
- Обновление устаревшего favicon обновлённым логотипом бренда
- Генерация Apple Touch Icon для закладок на главном экране iOS
- Создание всех необходимых размеров иконок для манифеста PWA
- Предоставление нескольких размеров favicon для лучшей совместимости
- Обеспечение единообразия бренда с совпадающим favicon во всех браузерах
Устранение неполадок
Favicon размытый при маленьких размерах (16x16, 32x32)
Решение
Начните с исходного изображения не менее 512x512 пикселей. Алгоритму уменьшения нужно достаточно деталей для чёткой маленькой иконки.
Favicon не отображается во вкладке браузера
Решение
Очистите кеш браузера и выполните жёсткую перезагрузку. Браузеры агрессивно кешируют favicon — даже после обновления HTML старая иконка может отображаться ещё несколько минут.
Неквадратное исходное изображение выглядит искажённым
Решение
Сначала обрежьте исходное изображение до квадрата инструментом Crop Image, затем генерируйте favicon из квадратной версии.
Часто задаваемые вопросы
Какой размер изображения загружать?
Не менее 512×512 пикселей для наилучших результатов.
Какие форматы генерируются?
Файлы PNG для всех размеров и многоразмерный файл ICO.
Могу ли я создать файл .ico?
Сейчас инструмент создаёт PNG-файлы для всех размеров. Большинство современных браузеров принимают PNG-favicon. Для формата .ico конвертируйте PNG 16x16 или 32x32 с помощью инструмента Конвертер изображений.
Как использовать созданные favicon в React или Next.js?
Поместите PNG-файлы в папку public и добавьте теги HTML link в head документа или макет приложения. Next.js имеет встроенный API метаданных, который принимает пути favicon напрямую.
How do I add the favicons to my website?
Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.
Why is my favicon not showing after adding the HTML snippet?
Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.
Can I generate a .ico file?
Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.
How do I use the generated favicons in a React or Next.js app?
Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.