Иконка во вкладке браузера — первое, что видит пользователь среди десятка открытых сайтов. Формат ICO хранит несколько размеров в одном файле (16, 32, 48, 256 px), чтобы иконка была чёткой и в табе, и в закладках. Из квадратного PNG-логотипа ICO собирает конвертер PNG в ICO на Top-Конвертер — в браузере, бесплатно, без регистрации.
Что такое favicon и зачем ICO
Favicon — маленькая картинка бренда. Современные сайты на Next.js и WordPress часто используют icon.png или SVG, но ICO по-прежнему узнаваем старыми панелями, ярлыками Windows и некоторыми CMS.
Преимущества ICO из логотипа:
- один файл — несколько размеров;
- читаемость буквы или символа на 16×16;
- совместимость с классическим
<link rel="icon" href="/favicon.ico">.
Если логотип только горизонтальный — для favicon сделайте квадратный знак (первая буква, символ, укороченный знак), иначе на 16 px ничего не разобрать.
Подготовка PNG перед конвертацией
- Квадрат — обрежьте или добавьте поля до соотношения 1:1.
- Простота — уберите мелкий текст и тонкие линии; на 16 px останется пятно.
- Контраст — тёмный знак на светлом фоне или наоборот; полупрозрачность на маленьких размерах теряется.
- Размер исходника — 256×256 или 512×512 px достаточно; больший PNG не даст пользы для ICO.
- Прозрачность — допустима; для тёмной темы браузера проверьте видимость.
Логотип в SVG? Сначала SVG в PNG в квадратном размере, затем PNG в ICO.
Пошагово: от PNG к favicon.ico
- Подготовьте квадратный PNG (до 25 МБ — для иконки это с запасом).
- Откройте PNG в ICO.
- Загрузите файл и скачайте
.ico. - Положите
favicon.icoв корень сайта или укажите путь в теме/CMS. - Очистите кэш браузера и проверьте вкладку и закладки.
До 20 операций в день на Top-Конвертер. Регистрация не требуется.
Next.js, WordPress и проверка
В Next.js App Router часто кладут icon.png в app/ — ICO можно добавить параллельно в public/favicon.ico. WordPress: Внешний вид → Настроить → Идентичность сайта или загрузка в корень по FTP.
После публикации откройте сайт в Chrome и Firefox, добавьте в закладки — иконка должна совпадать с брендом. Размыто? Упростите знак и повторите конвертацию.
Обратная задача — вытащить иконку из чужого ICO: ICO в PNG. Подробный гайд: создать favicon ICO из PNG.
