Генератор Favicon
Шаг 1. Загрузка картинки
Предпросмотр изображения
Шаг 2. Веб иконки
Вкладки браузера
Обычный вид
Тёмная тема/режим инкогнито
Поисковые системы
Яндекс компьютерная версия
Google компьютерная версия
Яндекс мобильная версия
Google мобильная версия
Шаг 3. Иконки приложений
Приветственные экраны барузера
Экраны смартфонов
Android светлый
iOS светлый
Android тёмный
iOS тёмный
Шаг 4. Устаревшие иконки
Windows Metro и Safari
Цвет фона
Шаг 5. Установка.
- Скачайте архивс вашими файлами.
- Загрузите их на ваш сайт.
- Проверьте, что файлы https://example.com/manifest.json, https://example.com/browserconfig.xml, https://example.com/favicon.ico открываются в браузере.
-
Добавьте следующий код в секцию
<head>вашего сайта:
- Проверьте корректность указания фавиконов в инструменте проверка страницы.
Инструкция
Сервис подготавливает фавиконы размерами: 24×24, 36×36, 48×48, 57×57, 60×60, 72×72, 76×76, 96×96, 120×120, 144×144, 192×192, 152×152, 167×167, 195×195, 196×196, 256×256, 384×384, 512×512, 180×180, 70×70, 150×150, 310×310, 310×150. Так же подготавливается векторная SVG версия, если вы загрузили изображение в этом формате.
Содержание
Зачем столько разных размеров?
Каждый размер используется определённым устройством или приложением. Лучше самостоятельно подготовить файл нужно размера, чем позволить приложениям самим масштабировать для себя фавиконы. Приложения могут взять фавикон 48 пикселей и ужать его до 36, но из-за несовершенства алгоритмов масштабирования такой фавикон будет низкого качества. А мы берём оригинальный, крупный файл 512×512 и ужимаем его до 36 пикселей в этом случае фавикон будет значительно качественней. То же самое касается ситуации, когда берётся файл 180x180 пикселей и ужимается до 144.
Какие преимущества даёт наш сервис
- Мы сохраняем файл favicon.ico в PNG формате, а не ICO. Само название файла остаётся оригинальным “favicon.ico”, но его формат - PNG. Благодаря тому, что PNG файл сжимается, мы экономим до 10 КБ по сравнению с форматом ICO.
- Обычно файл favicon.ico делается размером 16×16 пикселей. Но для 4к мониторов нужен размер 32×32. Поэтому мы используем его.
- При загрузке исходного файла картинки в формате SVG, мы стараемся использовать его, везде где это возможно. Это гарантирует максимальное качество при использовании фавикона.
- Все файлы минифицированны специальными программами для уменьшения размера без потери качества.
Другие нюансы фавиконов
- Фавикон для табло яндекс браузера делается самим яндексом. То есть, невозможно задать самостоятельно даже квадратную иконку. Только сам яндекс может добавить иконку сайта к себе в базу сайтов. Вот этот гайд из интернета не актуален.
- Фавиконы Windows Metro нужны для Windows 8 и 10 версии. Несмотря на то, что поддержка Windows 10 оканчивается 14 октября 2025, она всё ещё очень популярна с долей рынка ОС более 40%.
- Иконка для тачбара MacBook актуальна для моделей, выпускаемых с 2016 по 2023 года. После 2023 макбуки с тачбаром перестали выпускаться, так что эта функция постепенно устаревает. Согласно документации иконки должны иметь viewBox 16×16 пикселей, быть однослойными, а прозрачный и чёрные цвета будут прозрачными в интерфейсе.
- Фавикон размера 228×228 пикселей для браузера Opera Coast уже не актуален.