Создать фавикон за несколько секунд
Фавикон (или фавиконка) — это маленькая иконка, которая отображается во вкладках браузера, закладках, истории, результатах мобильного поиска и на главном экране, когда кто-то сохраняет ваш сайт. Она помогает посетителям найти вашу вкладку среди десятков других и придает даже небольшому сайту завершенный вид. Этот генератор фавиконок создает все необходимые файлы из одного изображения (или из буквы или эмодзи, если у вас еще нет логотипа) и выдает готовый HTML-код для добавления их на сайт.
Возможности
- Из изображения: PNG, JPG, SVG, WebP и другие форматы.
- Из текста или эмодзи: инициалы или эмодзи на цветном фоне.
- Закругленные углы и отступы, чтобы иконка аккуратно смотрелась во вкладках и на главных экранах.
- Предпросмотр в реальном времени в размерах 16, 32, 64 и 128 px.
- Полный набор: многоразмерный favicon.ico, иконки PNG, Apple touch icon, иконки для Android и web manifest.
- Готовые для копирования HTML-теги link.
- Конфиденциально: генерируется полностью в вашем браузере.
Размеры фавиконок и их назначение
| Файл | Размер | Где используется |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Все браузеры, ярлыки Windows, поддержка старых версий |
| favicon-16x16.png | 16 px | Вкладки браузера |
| favicon-32x32.png | 32 px | Вкладки на экранах высокого разрешения (high-DPI), панель задач |
| apple-touch-icon.png | 180 px | Главный экран iPhone и iPad |
| android-chrome-192x192.png | 192 px | Главный экран Android |
| android-chrome-512x512.png | 512 px | Экран загрузки Android (splash screen), установка PWA |
Советы по дизайну
- Упрощайте. Используйте только символ логотипа, а не полную версию с названием компании.
- Используйте контраст. Иконка должна хорошо выделяться как в светлой, так и в темной теме браузера.
- Тестируйте в размере 16 px. Если иконка не распознается в самом мелком превью, упростите ее еще сильнее.
- Заполняйте квадрат. Иконки с большим количеством пустого пространства кажутся крошечными на вкладках; уменьшите отступы.
Похожие инструменты
Сначала конвертируйте векторный логотип в PNG высокого разрешения с помощью SVG в PNG, измените размер нужного изображения через Изменить размер изображения или преобразуйте его в другой формат с помощью инструмента Конвертер изображений.