Генератор фавиконок — favicon.ico и иконки PNG
Браузерный инструмент для создания favicon.ico, PNG-иконок разных размеров, манифеста и HTML-кода
Работает в браузере · файлы никуда не загружаются
Лучше всего читаются один-два символа. Можно ввести до 4.
Записывается в поле "name" файла site.webmanifest.
Что это
Фавикон — это маленькая иконка во вкладке браузера, в закладках и на домашнем экране. Этот инструмент превращает логотип, пару букв или один эмодзи во все нужные размеры и выдаёт к ним HTML-теги и манифест веб-приложения. Изображение обрабатывается только в вашем браузере.
Как пользоваться
- Выберите Из чего сделать. Вариант Текст или эмодзи позволяет задать текст, шрифт и фон, вариант Изображение берёт файл вашего логотипа.
- Для изображения выберите, Как сделать квадрат (обрезать по центру или добавить поля), и включите или выключите Прозрачный фон. В поле Форма выберите квадрат, скруглённый квадрат или круг.
- При желании заполните Название сайта, Короткое название и Цвет темы — они попадут в site.webmanifest и HTML-код.
- Проверьте предпросмотр каждого размера и скачайте файлы по одному или нажмите Скачать всё (ZIP).
- Загрузите файлы в корень сайта и вставьте Код для
<head>вашего HTML в head страницы.
Файлы и правила
| Файл | Размер | Назначение |
|---|---|---|
| favicon.ico | 16, 32, 48 | иконка браузера по умолчанию, старые среды |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | вкладка браузера |
| favicon-48x48.png | 48 | ярлык на рабочем столе |
| apple-touch-icon.png | 180 | домашний экран iOS (непрозрачный квадрат до краёв) |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | Android, PWA |
| android-chrome-maskable-512x512.png (необязательно) | 512 | адаптивная иконка Android: рисунок в центральной безопасной зоне на фоне до краёв |
- Мастер-изображение: сначала рисуется квадрат 512 px, и все размеры делаются из него. Маленькие размеры получаются последовательным уменьшением вдвое — так края чище, чем при одном большом скачке.
- Структура ICO: заголовок 6 байт, запись каталога 16 байт на каждое изображение, затем данные PNG.
- Размещение текста: ширина текста не превышает примерно 78 % иконки, а размер шрифта — 72 %.
- Цвет текста: подбирается под фон — читаемый чёрный или белый; его можно изменить.
Пример кода
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Частые вопросы
Моё изображение загружается на сервер?
Нет. Масштабирование и сборка файла ICO выполняются в вашем браузере, а результаты только скачиваются на ваше устройство.
Какие файлы создаются?
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png и favicon.ico с размерами 16, 32 и 48. В комплекте также site.webmanifest и HTML-теги link, а всё вместе можно скачать одним ZIP-архивом.
Что находится внутри favicon.ico?
Изображения 16, 32 и 48 пикселей, сохранённые как PNG-потоки в контейнере ICO. Такую структуру читают современные браузеры и Windows начиная с Vista. Заголовок и каталог ICO инструмент пишет сам, а тесты проверяют сигнатуру (00 00 01 00) и количество записей.
Что будет с неквадратным изображением?
Фавикон квадратный, поэтому по умолчанию вырезается самый большой квадрат по центру. Если обрезка испортит логотип, выберите «Вписать целиком с полями» — пропорции сохранятся, а лишнее место останется прозрачным.
На что обратить внимание при работе с текстом или эмодзи?
При размере 16 пикселей читаются только один-два крупных символа. Эмодзи на каждой платформе выглядят по-своему, поэтому в иконке используется рисунок, который выводит ваше устройство. Шрифты тоже берутся с вашего устройства, так что некоторые буквы на разных компьютерах могут немного отличаться.
Куда положить файлы?
Загрузите их в корень сайта и вставьте теги link в head вашего HTML. Если файлы лежат в другой папке, поменяйте пути в коде. Браузеры долго хранят фавиконки в кеше, поэтому, если изменения не видны сразу, очистите кеш.
