Что такое Favicon?
Favicon — маленькая иконка, отображаемая на вкладке браузера, в закладках и избранном. Она очень мала, но именно от неё зависит, легко ли узнать сайт после добавления в закладки.
Помимо иконки вкладки, при добавлении на главный экран в iOS или установке в виде приложения в Android используются иконки большего размера.
Зачем генерировать несколько размеров?
Разным сценариям нужны разные размеры: для вкладки — 16/32, для иконки главного экрана — 180/192, для магазина приложений или экрана запуска может понадобиться 512.
Если предоставить только одно большое изображение, уменьшенная браузером мелкая иконка легко станет размытой. Этот инструмент за один раз создаёт все распространённые размеры.
- favicon.ico: лучшая совместимость, содержит три размера 16/32/48
- favicon-16x16.png / favicon-32x32.png: вкладки современных браузеров
- apple-touch-icon.png (180): добавление на главный экран в iOS
- android-chrome-192x192.png / 512x512.png: Android и PWA
Каким должно быть исходное изображение?
Рекомендуется квадратный PNG размером 512×512 или больше. Квадрат позволяет избежать обрезки и неравномерных полей при генерации.
Если изображение не квадратное, можно выбрать «Вписать целиком» (сохранить всю графику с полями вокруг) или «Заполнить с обрезкой» (заполнить весь холст, отрезав лишнее).
Прозрачный фон и apple-touch-icon
Прозрачный фон на вкладке обычно выглядит аккуратнее; однако иконки главного экрана в iOS не поддерживают прозрачность — прозрачные области станут чёрными.
Поэтому при создании apple-touch-icon этот инструмент автоматически использует непрозрачную подложку (по умолчанию белую), а остальные размеры сохраняют выбранные вами настройки прозрачности.
Как развернуть?
Положите скачанные файлы в корень сайта (на одном уровне с index.html) и вставьте сгенерированный HTML-код в
.Браузер отдаёт приоритет объявленным иконкам; favicon.ico служит запасным вариантом, совместимым с более старыми браузерами.