Гайд по favicon и PWA
Соберите стандартные веб-иконки параллельно с maskable.
Безопасная зона для maskable-иконок
Удерживайте ключевой контент в центре, чтобы иконка не теряла смысл при маскировании launcher-ом.
Проверка входа
- Используйте PNG/SVG с чистым и читаемым силуэтом.
- Рекомендуемый размер источника — 1024×1024 для качественного 512-экспорта.
- Сложные мелкие детали лучше упростить, чтобы они не потерялись после маски.
Практический сценарий
- Загрузите источник и переключите режим отступов на Safe.
- Проверьте maskable preview и убедитесь, что объект не прижат к краям.
- Если логотип зависит от прозрачных отступов, проверьте его на стабильном фоне.
- Экспортируйте icon-maskable-192x192 и icon-maskable-512x512 через ZIP.
Полный пример
Вход: Логотип приложения PNG с прозрачным фоном.
Настройки: Safe padding + сплошной фон для стабильного launcher-рендера.
Выход: Контент остается читаемым при круглом и squircle-обрезании.
Советы по safe-area
- Не размещайте текст, тонкие линии и важные углы слишком близко к внешнему краю.
- По возможности проверьте иконку на светлом и темном launcher-фоне.
- Храните обычные и maskable exports в одной release-папке, чтобы manifest не разъехался.
FAQ
Чем maskable отличается от обычной 512-иконки?
Maskable может обрезаться маской, поэтому требует более осторожной safe-area.
Какой фон лучше для maskable?
Обычно сплошной фон дает более предсказуемый вид на разных launchers.
Как понять, что объект слишком близко к краю?
Если текст или логотип почти касается границ preview, используйте режим Safe.
Связанные сценарии иконок
Гайд SVG в пакет
Экспортируйте полный набор файлов, начиная с SVG.
Связанные инструменты
Base64 Encode / Decode
Преобразуйте изображения в Base64 для отладки и интеграции.
QR Code Tool
Генерируйте QR-коды для страниц установки приложения и QA-ссылок.
Timestamp Converter
Конвертируйте release и cache-busting timestamps во время проверок.