PNG в ICO онлайн
Как перевести PNG в ICO онлайн
- Нажмите «Выбрать картинку» или перетащите файл на страницу. Подойдут PNG, JPG, SVG и WEBP. Лучше квадратная картинка от 256×256 пикселей.
- В строке «Размеры» выберите «Для сайта (favicon)», «Для Windows» или «Свои размеры», чтобы отметить размеры галочками.
- Если картинка не квадратная, в строке «Картинка не квадратная. Что сделать?» выберите «Добавить прозрачные поля» или «Обрезать края».
- Нажмите «Скачать ICO». Для favicon ниже появится код для сайта и кнопка «Скопировать код».
Иконку собирает ваш браузер, картинка остаётся у вас. Регистрация не нужна, водяного знака на значке не будет.
Какие размеры нужны в ICO
ICO это не одна картинка, а набор из нескольких размеров в одном файле. Браузер или Windows сами берут нужный: маленький для вкладки, большой для крупных значков. Поэтому одна иконка 16×16 на большом экране будет размытой.
| Набор | Размеры, px | Для чего |
|---|---|---|
| «Для сайта (favicon)» | 16, 32, 48 | Значок сайта во вкладке, в закладках и в поиске. |
| «Для Windows» | 16, 24, 32, 48, 64, 128, 256 | Значки папок, ярлыков и программ при любом виде: от «Мелких значков» до «Огромных». |
| «Свои размеры» | любые из списка от 16×16 до 256×256 | Когда программа или сайт просят конкретные размеры. |
Размер 256×256 хранится внутри как PNG, так делает и сама Windows, файл получается легче. Маленькие размеры записаны в простом виде, который понимают даже старые программы. Прозрачность сохраняется во всех размерах.
Какую картинку взять
- Квадратную и не меньше 256×256. Из маленькой картинки большой размер не получится чётким.
- Простую. В размере 16×16 видна только буква, силуэт или яркая фигура. Мелкий текст и фото в таком размере превращаются в пятно.
- PNG с прозрачным фоном, если значок должен лежать на любом фоне. Из JPG тоже можно сделать ICO, но фон у иконки останется, потому что в JPG нет прозрачности.
- SVG подходит отлично: он рисуется крупно, и все размеры выходят чёткими.
Если картинка не квадратная, «Добавить прозрачные поля» сохранит её целиком, а «Обрезать края» уберёт лишнее по бокам. Квадрат с нужной частью можно сначала вырезать на странице обрезать фото.
Как поставить favicon на сайт
- Выберите «Для сайта (favicon)» и скачайте файл. Если картинка одна, он сразу будет называться favicon.ico.
- Положите favicon.ico в корневую папку сайта, рядом с главной страницей.
- Нажмите «Скопировать код» и вставьте строку внутрь <head> на всех страницах сайта.
Строка выглядит так: <link rel="icon" href="/favicon.ico" sizes="any">. Во многих конструкторах сайтов и CMS вместо кода есть поле «Значок сайта» или «Favicon» в настройках.
Если после замены видна старая иконка, браузер показывает её из памяти. Откройте сайт в режиме инкогнито или очистите кэш. В поиске Яндекса и Google значок обновится не сразу, а после того, как робот снова зайдёт на сайт.
Иконка для папки или ярлыка в Windows
Выберите «Для Windows», чтобы значок был чётким при любом виде папки. Потом:
- Папка: правой кнопкой по папке, «Свойства → Настройка → Сменить значок → Обзор», выберите файл .ico.
- Ярлык: «Свойства → Ярлык → Сменить значок → Обзор».
В Windows 10 и 11 окна выглядят чуть по-разному, но путь одинаковый. Храните файл .ico там, где вы его не удалите: если файл пропадёт, вернётся стандартный значок.
Чего здесь нет
Обратный перевод ICO в PNG делает конвертер изображений: он открывает ICO и сохраняет в PNG, JPG и другие форматы. Если кроме ICO нужен PNG-вариант значка из векторного файла, откройте SVG в PNG. Нарисовать значок из текста или эмодзи этот инструмент не умеет, нужна готовая картинка.
Частые вопросы
Можно ли обойтись PNG вместо ICO для favicon?
Современные браузеры понимают и PNG, если указать его в коде страницы. Но favicon.ico в корне сайта браузеры и роботы ищут сами, поэтому его лучше иметь в любом случае.
Как сделать круглую иконку?
Сначала обрежьте картинку по кругу с прозрачным фоном, потом сделайте из неё ICO здесь. Углы останутся прозрачными во всех размерах.
Подойдёт ли ICO для значка сайта на экране iPhone?
Нет, для экрана «Домой» iPhone берёт PNG размером 180×180. Такой файл можно получить на странице изменить размер фото.
Какой самый большой размер может быть в ICO?
256×256 пикселей, больше формат не хранит. Этот размер входит в набор «Для Windows».
Можно ли сделать сразу несколько иконок?
Да, выберите несколько картинок: из каждой получится свой ICO, а все файлы скачаются одним архивом ZIP. Имя favicon.ico файл получает, только если картинка одна и выбран набор «Для сайта (favicon)».
Обновлено