.ico по-прежнему ожидают увидеть в корне сайта, а большинство онлайн-конвертеров требуют загрузить изображение на свой сервер. Расскажем, как получить правильный favicon.ico с несколькими размерами из PNG, никуда не отправляя файл.
.ico — это не просто переименованная картинка
Недостаточно переименовать logo.png в favicon.ico. ICO — контейнерный формат со своим заголовком: он описывает количество изображений, их размеры и положение каждого внутри файла. У переименованного PNG такого заголовка нет, и более строгие браузеры откажутся его показывать.
Правильный ICO содержит несколько разрешений одного значка. Браузер читает заголовок, выбирает вариант, наиболее близкий к нужному размеру, и ничего не увеличивает.
Конвертация PNG в ICO за три шага
Первый шаг — подготовка исходника. Квадратный PNG не меньше 512×512 пикселей даёт лучший результат: каждый размер получается уменьшением. Если у изображения прозрачный фон, заранее решите, сохранять ли его: для вкладки он хорош, но iOS и Android заменят его чёрным.
Второй шаг — создание разрешений. В файле должны быть как минимум 16×16, 32×32 и 48×48. При изменении размеров нужен качественный фильтр пересчёта пикселей, иначе маленькие варианты станут нечитаемыми.
Третий шаг — упаковка. Три изображения собираются в один контейнер ICO, а заголовок описывает каждую запись. Результат помещается в корень сайта под именем favicon.ico: браузеры найдут его даже без HTML-тега.
Почему важна локальная конвертация
Большинство конвертеров PNG в ICO загружают файл на сервер, обрабатывают его и возвращают результат. Ваш логотип, иногда ещё до публичного запуска, оказывается на чужой машине под действием правил хранения, которые вы не читали.
Современный браузер способен сделать всё сам: декодировать PNG, изменить его размер на canvas, заново закодировать каждый вариант и собрать контейнер ICO. Именно так работает LFFavicon. Ни один запрос не передаёт изображение, а закрытие вкладки очищает всё.
Преимущество вполне практическое: конвертация происходит сразу, работает без интернета после загрузки страницы, не требует ожидания в очереди и не ограничена числом операций в день.
Одного .ico уже недостаточно
Конвертация PNG в ICO покрывает вкладки и старые клиенты, но оставляет три случая: современные браузеры предпочитают чёткий при любом размере SVG; главному экрану iOS нужен непрозрачный PNG 180×180; Android читает веб-манифест.
Раз уж изображение обрабатывается, создайте весь набор за один проход. Именно это делает генератор: один исходник используется для .ico, SVG, значка Apple Touch и значков манифеста. Перед скачиванием можно посмотреть каждый вариант в его окружении.
Первоисточники
Частые вопросы
Какой размер PNG нужен для создания ICO?
Квадрат не меньше 512×512 пикселей. При размере меньше 128×128 крупные варианты в наборе придётся увеличивать, и они станут размытыми. SVG ещё лучше, поскольку у него нет ограничения разрешения.
Сохраняется ли прозрачность в .ico?
Да, ICO поддерживает полноценный альфа-канал, поэтому прозрачный PNG останется прозрачным во вкладке. Но для значка iOS нужен фон: система заполняет прозрачные области чёрным.
Куда поместить файл favicon.ico?
В корень домена, чтобы он был доступен по адресу https://yoursite.com/favicon.ico. Браузеры и поисковые роботы по соглашению запрашивают именно этот адрес, даже если файл не объявлен тегом link.