О генераторе фавикон
Никаких ручных настроек и другие преимущества
- Если фавикон плохо видна в тёмной теме, то загрузите её ещё раз — и вы получите новый результат. В основном это актуально для фавикон тёмной темы.
- Обновление! Доработана генерация фавикон для тёмной темы в Полном наборе: теперь используются PNG для ключевых размеров и один SVG для современных браузеров, обновлены manifest.json и snippet.html для поддержки PWA и совместимости, а также добавлен JavaScript-код для динамического переключения favicon между светлой и тёмной темой.
- Если загружаемое изображение слишком тёмное для dark-темы, то оно автоматическая будет скорректировано — чтобы фавикон выглядел контрастно и чётко.
- Приложение само определяет нужны ли отступы фавикон для ярлыка на рабочем столе смартфона.
- Белый фон добавляется только у тех разрешений и форматов фавикон, где это нужно, в остальных случаях сохраняется прозрачность.
- Генерация фавикон и файлов соответствует требованиям Яндекса.
- Кросс-платформенность: полная поддержка всех платформ (iOS, Android, Windows, PWA) и форматов (SVG, PNG, ICO).
- Для фона сплеш экранов используется один из цветов вашей фавикон, а в случае, когда у неё есть собственный фон, фон сплеш экрана останется белым — чтобы сохранить привлекательность и читаемость.
Как подготовить SVG-файл для загрузки в генератор
- Понадбится фигма, иллюстратор, другой векторный редактор или знакомый дизайнер
- Проверьте отсутствие выключенных цветов.
- Не должно быть масок и эффектов.
- Если изображение заходит за край фрейма, то белый фон не появится.
- Фрейм желательно быть квадратным (1:1).
- Обновление! Теперь можно загружать SVG с любыми пропорциями. Польователю доступен инструмент кадрирование.
Что находится в ZIP-архиве максимального набора
- Apple Touch Icons (57×57 — 180×180).
- iOS Splash-screens (iPhone SE/6/7/8/X/11/12 и iPad).
- Safari Pinned Tab Icon.
- Android Web App Icons (192×192, 512×512).
- Windows Tiles (70×70 — 310×150).
- Классические favicon (16×16 → 256×256) в PNG и SVG.
- ICO-файл с четырьмя размерами внутри.
- Фавикон для тёмной темы.
- Фавикон для Яндекса.
- manifest.json/site.webmanifest и готовый HTML‑сниппет.
- Обновление! Теперь все файлы находятся в соответсвующих назначению папках.
Что находится в ZIP-архиве минимального набора
- Apple Touch Icons (57×57 — 180×180) в PNG.
- Android Web App Icons (192×192)в PNG.
- Классические favicon (16×16 — 96×96) в PNG.
- ICO-файл с тремя размерами внутри.
- Фавикон для Яндекса.
- manifest.json и готовый HTML‑сниппет.
Зачем нужен фавикон
Фавикон — это маленькая квадратная иконка, которую вы видите на вкладке браузера, в закладках или рядом с результатами поиска. Название произошло от английского «favorite icon» — «избранный значок».
Фавикон служит визуальной ассоциацией с сайтом и его содержимым. Дизайнеры часто называют его «напоминалкой» для пользователей, чтобы они не забывали, на какой странице находятся. Подобно логотипу, он передаёт идею и атмосферу ресурса. У многих крупных брендов фавикон и логотип совпадают. В простом варианте в качестве фавикона используют первую букву названия или тематический символ.
Фавикон помогает пользователям быстрее находить и запоминать сайт. Такие иконки укрепляют бренд и улучшают визуальную составляющую страницы. Хорошо продуманный фавикон делает сайт более заметным — в списке закладок или среди десятков открытых вкладок он привлекает взгляд и стимулирует клик.
