Как сделать пакет фавиконов из PNG без регистрации?

Семь файлов, которые наш генератор иконок создает из одного PNG, что читает каждый из них, куда они помещаются на вашем сервере и почему прозрачные части становятся непрозрачными.

August 9, 2026

Фавикон — это не файл. Это набор файлов, потому что вкладка браузера, главный экран iOS и запрос установки Android требуют разные изображения разного размера. Перетащите один PNG в наш генератор иконок, и на выходе получите семь файлов. Вот для чего нужен каждый из них, где он должен находиться на вашем сервере и какие из них можно пропустить.

Всё работает внутри страницы. В этом приложении нет маршрутов API и никаких действий на сервере, поэтому ваш логотип считывается с помощью createImageBitmap, рисуется на OffscreenCanvas и кодируется в PNG вашим собственным браузером. Никакой учетной записи и никаких обещаний удалить ваше произведение через час.

Что за семь файлов и что делает каждый из них?

Семь файлов, одно исходное изображение. Размеры ниже получены из реального запуска с alpha.png, прозрачным PNG размером 900 на 606 пикселей и размером 942,4 КБ. Ваши значения байтов будут отличаться, потому что они зависят от того, сколько деталей сохраняется на каждом размере, но имена файлов и размеры пикселей фиксированы инструментом.

Вам не нужны все семь. Если вас интересуют только вкладки на рабочем столе, одного favicon.ico достаточно. Файл Apple становится важным, как только кто-то сохраняет ваш сайт на главный экран, а два PNG для Android занимают свое место только если вы действительно отправляете манифест.

Куда помещаются файлы и что идет в head?

Все семь должны находиться в корне веб-сайта, чтобы они разрешались как /favicon.ico, /apple-touch-icon.png и так далее. В Next.js это папка public. Затем в вашем head должны быть четыре тега: одна ссылка apple-touch-icon размером 180x180, две ссылки rel=icon для 32 и 16, и одна ссылка на манифест. Инструмент выводит этот фрагмент рядом с результатами с кнопкой копирования.

site.webmanifest — это 371 байт JSON, содержащий name, short_name, два значка Android, theme_color, background_color и display, установленный на standalone. Путь к значкам внутри написан абсолютным, как /android-chrome-192x192.png, поэтому размещение пакета в /assets/icons/ тихо ломает их, и вам нужно будет отредактировать оба значения src. Еще одна ловушка: оставьте оба поля name пустыми в панели, и манифест будет отправлен с буквальным именем "My App", которое телефон выведет под вашим значком.

Почему favicon.ico нет в этом фрагменте?

Потому что браузеры запрашивают его без указания. Тег не нужен. Раздел rel=icon спецификации HTML описывает соглашение /favicon.ico: когда документ не объявляет ссылку на значок, браузер сам пытается этот корневой путь. Вот почему .ico работает без разметки, и именно поэтому файл должен находиться в корне. Копия, находящаяся в /images/, никогда не запрашивается. Если вам действительно нужно это где-то еще, добавьте явную ссылку на значок, указывающую на ваш путь, и угадывание прекратится.

Что на самом деле внутри favicon.ico?

.ico — это контейнер. Наш содержит три PNG, отрендеренные на 16, 32 и 48 пикселей, за 6-байтовым заголовком плюс одна 16-байтовая запись каталога на каждое изображение, что составляет 54 байта структуры вокруг данных изображения. Вот как один файл размером 4,6 КБ охватывает три размера: браузер читает каталог, затем извлекает запись, которая соответствует тому, что он рисует. Макет байтов этого каталога и почему ничего больше 256 не помещается в него — это отдельная тема. Windows понимает PNG-данные внутри .ico с Vista, и современные браузеры обрабатывают их без жалоб.

Почему мой прозрачный PNG оказался с непрозрачным фоном?

Потому что каждый холст значка заполняется перед тем, как ваш логотип окажется на нем. Контроль фона — это input type=color, который не содержит альфа-канала, поэтому заливка всегда непрозрачная, а по умолчанию — #ffffff. Любая прозрачность вашего источника сглаживается с этим цветом. Здесь нет прозрачного варианта. Выберите цвет, который соответствует поверхности, на которой будет находиться знак, перед тем как нажать на кнопку генерации.

Форма тоже имеет значение. alpha.png размером 900 на 606, а значки квадратные, поэтому произведение помещается внутри квадрата с его длинной осью на полной ширине, а цвет фона заполняет полосы сверху и снизу. Если эти полосы вас раздражают, сначала сделайте изображение квадратным в обрезчике, который принимает один файл размером до 10 МБ и предлагает пресет 1:1 среди своих восьми соотношений сторон. Ползунок отступа в панели значков варьируется от 0 до 30% и равномерно вставляет произведение со всех четырех сторон.

196 КБ — это слишком много для файла значка?

196 КБ для android-chrome-512x512.png выглядит тревожно рядом с 521-байтовым файлом 16px. Две вещи снимают напряжение. Этот значок не загружается при обычном просмотре страницы, так как вкладка всегда хочет только маленький, а PNG, выходящий из кодировщика холста, не оптимизирован: convertToBlob создает действительный файл без фильтров и палитры, которые делает специализированный оптимизатор. Это тот же кодировщик браузера, который формирует размеры файлов в наших измерениях JPG в PDF.

Вы можете уменьшить его, запустив PNG снова через компрессор. На том же alpha.png размером 942,4 КБ, без потерь (уровень oxipng 3) составил 383,9 КБ, уменьшившись на 59% без изменения пикселей. Режим с меньшим файлом (imagequant) достиг 98,3 КБ, уменьшившись на 90%, путем уменьшения изображения до палитры. Плоский логотип с несколькими цветами — это именно то место, где палитра не стоит вам ничего видимого. Сохраняйте его без потерь, если ваш значок фотографический.

Нужно ли мне регистрироваться, и загружается ли мой логотип?

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

Ограничения составляют один файл за раз и 10 МБ, а зона перетаскивания принимает PNG, JPEG, WebP, AVIF, GIF и SVG. SVG сначала растеризуется на большем из своих собственных размеров или 512 пикселей, поэтому даже источник 64px все равно дает чистый значок 512. Этот рендер загружает файл в элемент <img>, тот же ограниченный путь, который отбрасывает внешние шрифты и связанные битмапы из SVG. Всё загружается в одном файле favicon-package.zip, содержащем все семь файлов. Если ваш логотип пришел как слишком большой экспорт, сначала измените размер, чтобы не подавать 20-мегапиксельный баннер в квадрат 16 пикселей.

Сделайте это следующим: откройте генератор иконок, перетащите свой логотип, установите цвет фона, чтобы он соответствовал тому, где будет находиться значок, сгенерируйте, распакуйте в корень вашего веб-сайта, вставьте четыре тега в свой head и добавьте "start_url": "/" в site.webmanifest. Затем выполните жесткую перезагрузку сайта и посмотрите на вкладку. Если версия 16px выглядит как размазня, вернитесь и упростите знак, прежде чем что-либо менять. Заметки Apple Конфигурирование веб-приложений стоит прочитать, если главный экран iOS — ваш приоритет.