- Главная
- Изображения
- Фавикон
Генератор фавиконов
Создаёт фавиконы всех размеров из одного изображения.
Перетащите логотип сюда или нажмите, чтобы выбрать
PNG, SVG, JPG, WebP или ICO. Лучше всего подходит квадратный логотип от 512 × 512 пикс. Файлы обрабатываются в браузере и никуда не загружаются. Они хранятся в этом браузере, пока вы их не уберёте.
Ctrl+OвыбратьCtrl+Vвставить
Фавикон — это маленькая иконка, которую браузеры показывают на вкладках и в закладках; телефоны используют версии побольше, когда сайт добавляют на главный экран. Перетащите один логотип, и генератор создаст все файлы, которые нужны сайту, — favicon.ico, PNG-фавиконы, иконку Apple touch, иконки для Android и веб-манифест — с живым предпросмотром и HTML-кодом для вставки на страницу. Всё работает в браузере, поэтому логотип не покидает ваше устройство; бесплатно и без регистрации.
Как создать фавикон
- Перетащите логотип (PNG, SVG, JPG или WebP) в любое место страницы, вставьте его сочетанием Ctrl+V или нажмите, чтобы выбрать файл. Изображение, добавленное в другом инструменте для изображений, уже есть в списке в том виде, в каком вы его там оставили: нажмите на его миниатюру, чтобы использовать его. На примере логотипа можно попробовать без своего файла.
- Логотип кадрируется автоматически: у широкого логотипа выделяется знак, у остальных обрезаются пустые края. Перетащите квадрат на логотипе, чтобы изменить выбор, или выберите «Весь логотип». Выберите фон (первыми предлагаются цвета вашего логотипа), отступ и форму — превью обновляются по ходу.
- Нажмите «Скачать все (ZIP)», положите файлы в корневую папку сайта, затем нажмите «Копировать HTML» и вставьте теги в <head> вашей страницы.
Возможности
- favicon.ico с иконками 16, 32 и 48 пикс., а также PNG-фавиконы 16 и 32 пикс.
- apple-touch-icon.png (180 пикс.) и иконки Android Chrome (192 и 512 пикс.)
- site.webmanifest с названием приложения и цветом темы, а также HTML-теги для <head>
- Автоматически находит знак широкого логотипа; перетащите квадрат, чтобы взять другую часть, или впишите логотип целиком
- Фон: прозрачный, цвета вашего логотипа или любой цвет; отступ от 0 до 30 %; форма — квадрат, скруглённый квадрат или круг
- Живой предпросмотр каждого размера, вкладки браузера и главного экрана в светлой и тёмной теме
- Исходник в PNG, SVG, JPG, WebP или ICO; все файлы — одним ZIP-архивом
Это конфиденциально?
Да. Иконки создаются в браузере движком обработки изображений на WebAssembly; логотип и готовые файлы не покидают ваше устройство. Логотип остаётся в этом браузере, пока вы не уберёте его из списка.
Частые вопросы
Какие размеры фавиконов нужны?
Почти всё покрывают четыре файла: favicon.ico с размерами 16, 32 и 48 пикс. для вкладок браузера, закладок и ярлыков Windows; apple-touch-icon.png на 180 пикс. для главного экрана iPhone и iPad; PNG на 192 и 512 пикс., перечисленные в site.webmanifest, для Android и устанавливаемых веб-приложений. В ZIP-архиве есть все они, а также PNG на 16 и 32 пикс. для браузеров, которые предпочитают PNG.
Как добавить фавикон в HTML?
Положите файлы в корневую папку сайта, чтобы открывался адрес /favicon.ico, затем нажмите «Копировать HTML» и вставьте теги в <head> каждой страницы. Браузеры ищут /favicon.ico даже без тега; теги добавляют размеры PNG, иконку Apple и манифест.
Почему у apple-touch-icon.png есть фон?
Потому что iPhone и iPad показывают прозрачные пиксели чёрными и сами скругляют углы, поэтому иконка Apple — всегда сплошной непрозрачный квадрат: вашего цвета фона или белый, если фон прозрачный. Остальные иконки сохраняют прозрачность и форму.
Можно ли использовать логотип в SVG?
Да. Браузер отрисовывает SVG в его собственном размере или, если он меньше, размером 1024 пикс., и из этого изображения создаются все иконки. SVG, который ссылается на другие файлы (изображения, шрифты или таблицы стилей), нельзя полностью отрисовать как изображение, поэтому инструмент сообщит об этом, а не создаст неполные иконки; сначала экспортируйте его в PNG или встройте в него изображения.
Я заменил фавикон, а браузер всё ещё показывает старый. Почему?
Браузеры долго хранят фавиконы в кеше. Перезагрузите страницу сочетанием Ctrl+F5 (Cmd+Shift+R на Mac) или откройте сайт в приватном окне, чтобы увидеть новую иконку.