Генератор favicon онлайн: создать favicon.ico из PNG или SVG
Превращает PNG или SVG в favicon.ico с четырьмя размерами внутри и выдаёт site.webmanifest вместе с HTML-кодом для подключения. Картинка обрабатывается в браузере и никуда не загружается.
Перетащите PNG или SVG
Лучше квадратный SVG или PNG от 512×512 px. До 50 файлов по 10 МБ — файлы не покидают ваш компьютер.
Возьмите иконку из каталога
Как пользоваться
Как создать favicon онлайн
- Загрузите квадратный PNG или SVG — перетаскиванием, через выбор файла или вставкой из буфера (Ctrl+V).
- Посмотрите, как значок читается в размере 16 px: именно таким его увидят во вкладке.
- Скачайте favicon.ico и site.webmanifest, скопируйте HTML-код.
- Загрузите файлы в корень сайта и вставьте код в
<head>.
Значок можно подобрать, не выходя со страницы: блок «Возьмите иконку из каталога» передаёт пиктограмму в генератор без скачивания и пересохранения. Интернет-магазину подойдут иконки покупок, кафе — иконки еды и напитков, сайту компании — пиктограммы бизнеса и финансов.
Что внутри ICO
ICO — контейнер: в одном файле лежит несколько растровых версий одного значка, по одной на каждый сценарий показа. Поэтому при переводе PNG в ICO генератор кладёт в файл сразу четыре размера.
| Размер | Где используется |
|---|---|
| 16×16 | вкладка, закладки, история браузера |
| 32×32 | вкладки на экранах высокой плотности, панель задач |
| 48×48 | ярлык сайта на рабочем столе Windows |
| 64×64 | крупные ярлыки при масштабировании интерфейса |
Вместе с ICO вы получаете site.webmanifest и HTML-код со ссылками на значок и манифест. Полный комплект значков сайта включает и PNG: apple-touch-icon 180×180 для домашнего экрана iPhone и iPad, 192×192 и 512×512 — для Android и установки сайта как PWA. Если эти размеры нужно сделать отдельно, их за один проход соберёт генератор иконок для приложений.
Без загрузки на сервер
Генератор рисует слои на Canvas прямо в браузере, поэтому логотип ещё не запущенного проекта никто не увидит раньше времени. Лимиты: до 10 МБ на файл и до 50 файлов за раз — значки для нескольких сайтов скачаются одним ZIP.
Советы и типичные ошибки
- Много деталей. На 16 px читаются одна-две крупные формы, тонкие линии пропадают. Для значка лучше подходят иконки с заливкой.
- Неквадратный исходник растянется — заранее добавьте прозрачные поля до квадрата.
- Контраст. Проверьте значок в светлой и тёмной теме браузера: чёрная пиктограмма на прозрачном фоне теряется на тёмной вкладке. Выручит цветная подложка или перекраска SVG.
- Файл не в корне. Браузеры и поисковые роботы по умолчанию запрашивают /favicon.ico, даже если в HTML ничего не указано.
- Кэш. Меняя значок, меняйте и версию в ссылке на него.
Подробности — в статье как сделать favicon для сайта, а готовые значки можно скачать в разделе иконок в формате ICO.
Частые вопросы
- Какая картинка нужна для favicon?
- Квадратная: SVG или PNG от 512×512 px. Из крупного исходника все слои уменьшаются аккуратно, а картинку меньше 64 px пришлось бы растягивать, и крупные размеры вышли бы мутными.
- Как перевести PNG в ICO?
- Загрузите PNG в генератор — он соберёт ICO с версиями 16, 32, 48 и 64 px в одном файле. Браузер и система сами выбирают подходящую: вкладке нужен 16 px, ярлыку на рабочем столе — 48 px.
- Куда положить favicon.ico и как его подключить?
- Положите файл в корень сайта, чтобы он открывался по адресу /favicon.ico, а манифест — рядом. Сгенерированный HTML-код вставьте в раздел head на всех страницах.
- Почему браузер показывает старый значок?
- Браузеры долго кэшируют favicon. Добавьте к ссылке на файл версию, например ?v=2, и проверьте результат в приватном окне.
- Когда новый favicon появится в поисковой выдаче?
- Поисковые системы обновляют значок после очередного обхода сайта, поэтому в выдаче он меняется не сразу. Важно, чтобы файл был доступен роботам и не был закрыт в robots.txt.
- Какого размера должен быть favicon?
- Классический favicon.ico содержит 16×16, 32×32 и 48×48 px; для вкладок на экранах высокой плотности пригодится 64×64. Отдельно нужны PNG 180×180 для Apple Touch Icon и 192 и 512 px для манифеста Android и PWA — генератор делает все размеры из одного исходника.