Конвертация изображений в иконки и favicon
Выберите одно изображение, и мы сгенерируем из него полный набор иконок: favicon.ico с шестью размерами внутри, а также PNG-иконки для каждого размера, который требуют браузеры и операционные системы.
Как это использовать
- 1
Выберите изображение — в идеале квадратное PNG с прозрачным фоном.
- 2
Выберите режим вписывания и нужные размеры.
- 3
Просмотрите каждый размер перед скачиванием.
- 4
Скачайте отдельно favicon.ico или полный пакет с PNG-иконками и манифестом.
Почему одного изображения недостаточно
Браузерам нужны 16 и 32 пикселя для вкладки, iOS хочет 180 для главного экрана, а Android — 192 и 512 для манифеста. Передача одного крупного изображения заставляет каждое устройство уменьшать его самостоятельно, что при малых размерах выглядит размыто, поэтому мы отрисовываем каждый размер отдельно с качественным сглаживанием.
Что такое файл ICO
Единый файл, хранящий несколько изображений разных размеров, из которого система выбирает то, что подходит под конкретное место. Мы помещаем в него 16, 32, 48, 64, 128 и 256 пикселей — покрытие, которое вместе требуют браузеры и Windows.
Вписать целиком или заполнить и обрезать?
Иконки квадратные, а ваше изображение обычно нет. «Вписать целиком» сохраняет всё изображение и добавляет прозрачные поля, что подходит для логотипов. «Заполнить и обрезать» заполняет квадрат и обрезает края, что подходит для фотографий.
Вопросы
- В чём разница между favicon.ico и PNG-иконками?
- ICO хранит несколько размеров вместе, и его понимают все браузеры, включая старые. Отдельные PNG-иконки нужны для iOS, Android и веб-манифеста. Полный пакет даёт вам и то, и другое.
- Куда поместить эти файлы?
- В корень вашего сайта, а затем добавьте теги ссылок, показанные под инструментом, в раздел head ваших страниц.
- Что делает исходное изображение хорошим?
- Квадратное изображение с прозрачным фоном, размером 512 пикселей или больше. Простые логотипы выглядят гораздо лучше при 16 пикселях, чем детализированные иллюстрации.
- Сохраняется ли прозрачность?
- Да. Каждый размер генерируется в формате PNG, как внутри ICO, так и отдельно, а PNG полностью поддерживает прозрачность.
- Поддерживается ли SVG?
- Да, и это лучший возможный источник — он отрисовывается точно в размере каждой иконки, поэтому результат получается идеально чётким.
- Какой размер у иконки для iOS?
- 180 пикселей, для тега apple-touch-icon. Он выбран по умолчанию в списке размеров.
- Загружается ли моё изображение на сервер?
- Нет. Генерация полностью происходит в вашем браузере, а сам файл ICO собирается побайтово прямо на странице.
- Что такое site.webmanifest?
- Файл, который сообщает Android, какие иконки использовать, когда кто-то добавляет ваш сайт на главный экран. Мы генерируем его готовым внутри пакета.