Генератор фавиконок — создайте favicon.ico и значки для PWA

Что создаёт этот генератор фавиконок

Фавиконка давно перестала быть одним файлом. Для вкладки браузера нужны 16 пикселей, для Retina-экранов — 32, для ярлыка на рабочем столе Windows — 48, для домашнего экрана iPhone — значок 180 пикселей, а для устанавливаемого веб-приложения требуются иконки 192 и 512 пикселей, объявленные в манифесте. Этот инструмент берёт одно исходное изображение и создаёт всё сразу: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png и файл site.webmanifest, упакованные в ZIP вместе с четырьмя строками HTML для их подключения. Файл .ico собирается вручную, а не отдаётся на откуп конвертеру. ICO — это формат-контейнер, а не кодек: шестибайтный заголовок сообщает, сколько изображений внутри, за ним следуют 16-байтные записи (по одной на изображение) с данными о ширине, высоте, длине в байтах и абсолютном смещении, а после идут сами данные изображений. Все современные браузеры принимают внутри ICO данные в формате PNG, поэтому этот генератор записывает PNG вместо устаревшего BMP/DIB с его обратным порядком строк и отдельной однобитной маской прозрачности. Внутрь помещается три изображения — 16, 32 и 48 пикселей, — чтобы Windows и старые браузеры могли выбрать подходящий размер, а не масштабировать один абы как. Любопытная особенность формата на случай, если будете разбирать байты: ширина и высота занимают по одному байту, поэтому 256 записывается как ноль, а значения больше передать уже нельзя. Качество масштабирования продумано не меньше. Уменьшить логотип с 1024 пикселей сразу до 16 одним вызовом drawImage — значит попросить билинейный фильтр браузера обобщить блок 64 на 64 пикселя по выборке 2 на 2, потеряв почти все исходные пиксели и получив ту самую кашу, которой славятся самодельные фавиконки. Вместо этого инструмент уменьшает изображение вдвое пошагово, никогда не уменьшая более чем наполовину за один проход, так что каждый шаг усредняет информацию с полноценной окрестности, и мелкие детали доживают до 16 пикселей. Скругление углов и отступы применяются в процессе рендеринга, а не после, поэтому сглаживание краёв сохраняется на всех размерах.