ICO
ЗАГРУЗИТЬ
PNG
Нажмите или перетащите PNG
Нажмите или перетащите PNG
Коротко об инструменте
Формат ICO держит внутри себя сразу несколько копий картинки в разных масштабах, и браузер сам берёт ту, что подходит вкладке, панели закладок или ярлыку на рабочем столе. Поэтому классический favicon.ico до сих пор кладут в корень сайта: он выручает там, где SVG и PNG-иконки не подхватываются — в старых версиях IE, в RSS-читалках, в закреплённых плитках Windows. Инструмент собирает такой контейнер из вашего PNG прямо во вкладке. Смотрите также: разобрать готовый ICO обратно в PNG, подогнать логотип под квадрат перед сборкой иконки, перевести иконку в векторный SVG.
Минимум 16×16 и 32×32 — это вкладка и панель закладок в обычном и в ретина-масштабе. 48×48 нужен сразу двоим: ярлыку на рабочем столе Windows и роботу Google, который берёт для выдачи иконку именно этого размера. 256×256 добавляют ради крупных плиток и списка приложений — проводник Windows читает вложения вплоть до этого размера. Больше пяти вложений класть смысла нет: файл растёт, а браузер всё равно берёт одно изображение.
В корень домена, файлом с именно таким именем: браузеры и поисковые роботы запрашивают /favicon.ico сами, без всякой разметки. Дополнительно можно прописать в head строку link с rel="icon" — она нужна, если файл лежит в другой папке или называется иначе. Проверять обновление лучше в приватном окне: старая иконка живёт в кеше долго.
Поле ограничено типом image/png сознательно. У JPG нет альфа-канала, поэтому иконка получила бы непрозрачный прямоугольник фона, который на тёмной теме вкладки выглядит как белая плашка. Переведите снимок в PNG соседним конвертером, вырежьте фон и только потом собирайте ICO.
Загрузите PNG, у которого прозрачность уже есть: альфа-канал переносится в ICO как есть, дорисовывать белую подложку инструмент не станет. Учтите, что в размере 16×16 тонкие линии на прозрачном фоне почти исчезают — для мелких масштабов надёжнее плотный знак на заливке, чем ажурный контур.
Нет. Контейнер ICO хранит только статичные изображения, анимации в нём не предусмотрено ни спецификацией, ни этим инструментом. Мигающие иконки на сайтах делают либо анимированным GIF через link rel="icon", либо скриптом, который подменяет favicon по таймеру — оба способа поддерживаются браузерами неровно.
Нет: PNG читается во вкладке, каждый масштаб отрисовывается на canvas, а байты контейнера ICO собираются тут же в памяти страницы и отдаются как обычная загрузка файла. Наружу ничего не уходит, поэтому непубличный логотип можно готовить без опасений и без соглашения о конфиденциальности.
Зависит от числа вложений. Комплект 16 + 32 + 48 обычно укладывается в 5–10 КБ, добавление 256×256 поднимает файл до 15–40 КБ, потому что крупная картинка внутри хранится несжатым растром. Если важна скорость первой загрузки, ограничьтесь тремя мелкими масштабами.
До: logo.png 512×512, прозрачный фон, буква на цветном круге
После: favicon.ico с четырьмя вложениями: 16, 32, 48 и 256 пикселей, около 15 КБ
До: icon.png 256×256 плюс свой размер 64 в поле «Свой размер»
После: favicon.ico с масштабами 16, 32 и 64 — ровно то, что запрашивает корпоративный портал
Оценка и фидбек помогают понять, что улучшать дальше.