IT Market
Инструменты/Изображения/Конвертер PNG в ICO — favicon для сайта онлайн
PNG
ICO

ЗАГРУЗИТЬ
PNG

Нажмите или перетащите PNG

Ожидание файла
Full Preview
Ожидание конвертации...

Коротко об инструменте

Конвертер PNG в ICO

Формат ICO держит внутри себя сразу несколько копий картинки в разных масштабах, и браузер сам берёт ту, что подходит вкладке, панели закладок или ярлыку на рабочем столе. Поэтому классический favicon.ico до сих пор кладут в корень сайта: он выручает там, где SVG и PNG-иконки не подхватываются — в старых версиях IE, в RSS-читалках, в закреплённых плитках Windows. Инструмент собирает такой контейнер из вашего PNG прямо во вкладке. Смотрите также: разобрать готовый ICO обратно в PNG, подогнать логотип под квадрат перед сборкой иконки, перевести иконку в векторный SVG.

Как пользоваться

  1. Нажмите «+ ДОБАВИТЬ» в блоке «ЗАГРУЗИТЬ PNG» и выберите картинку — поле принимает только image/png, поэтому JPG сначала переведите в PNG.
  2. Берите квадратный исходник не меньше 256×256: увеличить маленькую картинку без мыла не выйдет, а прямоугольную иконка обрежет или сплющит.
  3. В блоке «Масштабы иконки (.ico)» отметьте нужные размеры — 16 и 32 обязательны для вкладки, 48 для ярлыка Windows, 256 для крупных плиток.
  4. Если требуется нестандартный масштаб, впишите его в поле «Свой размер (например: 64)»; принимаются значения от 8 до 256.
  5. Нажмите «СКАЧАТЬ FAVICON.ICO» — все выбранные масштабы упакуются в один файл, который кладут в корень сайта.
  6. «СБРОСИТЬ» сбрасывает выбранные размеры и очищает загруженную картинку.

Вопросы и ответы

Какие размеры иконки нужно включать в favicon.ico?

Минимум 16×16 и 32×32 — это вкладка и панель закладок в обычном и в ретина-масштабе. 48×48 нужен сразу двоим: ярлыку на рабочем столе Windows и роботу Google, который берёт для выдачи иконку именно этого размера. 256×256 добавляют ради крупных плиток и списка приложений — проводник Windows читает вложения вплоть до этого размера. Больше пяти вложений класть смысла нет: файл растёт, а браузер всё равно берёт одно изображение.

Куда положить готовый favicon.ico на сайте?

В корень домена, файлом с именно таким именем: браузеры и поисковые роботы запрашивают /favicon.ico сами, без всякой разметки. Дополнительно можно прописать в head строку link с rel="icon" — она нужна, если файл лежит в другой папке или называется иначе. Проверять обновление лучше в приватном окне: старая иконка живёт в кеше долго.

Почему инструмент не принимает JPG?

Поле ограничено типом image/png сознательно. У JPG нет альфа-канала, поэтому иконка получила бы непрозрачный прямоугольник фона, который на тёмной теме вкладки выглядит как белая плашка. Переведите снимок в PNG соседним конвертером, вырежьте фон и только потом собирайте ICO.

Как сделать favicon с прозрачным фоном?

Загрузите PNG, у которого прозрачность уже есть: альфа-канал переносится в ICO как есть, дорисовывать белую подложку инструмент не станет. Учтите, что в размере 16×16 тонкие линии на прозрачном фоне почти исчезают — для мелких масштабов надёжнее плотный знак на заливке, чем ажурный контур.

Можно ли сделать анимированный favicon в формате ICO?

Нет. Контейнер ICO хранит только статичные изображения, анимации в нём не предусмотрено ни спецификацией, ни этим инструментом. Мигающие иконки на сайтах делают либо анимированным GIF через link rel="icon", либо скриптом, который подменяет favicon по таймеру — оба способа поддерживаются браузерами неровно.

Мой логотип уходит на сервер, пока собирается иконка?

Нет: PNG читается во вкладке, каждый масштаб отрисовывается на canvas, а байты контейнера ICO собираются тут же в памяти страницы и отдаются как обычная загрузка файла. Наружу ничего не уходит, поэтому непубличный логотип можно готовить без опасений и без соглашения о конфиденциальности.

Сколько весит готовый favicon.ico?

Зависит от числа вложений. Комплект 16 + 32 + 48 обычно укладывается в 5–10 КБ, добавление 256×256 поднимает файл до 15–40 КБ, потому что крупная картинка внутри хранится несжатым растром. Если важна скорость первой загрузки, ограничьтесь тремя мелкими масштабами.

Примеры

Favicon для нового сайта на WordPress
До: logo.png 512×512, прозрачный фон, буква на цветном круге
После: favicon.ico с четырьмя вложениями: 16, 32, 48 и 256 пикселей, около 15 КБ
Иконка для внутреннего сервиса компании
До: icon.png 256×256 плюс свой размер 64 в поле «Свой размер»
После: favicon.ico с масштабами 16, 32 и 64 — ровно то, что запрашивает корпоративный портал