Ikony PWA: unikaj obciętego logo i małego białego pola
Zainstalowane aplikacje internetowe korzystają z ikon manifestu. Program uruchamiający może nakładać maskę kształtu.
Przygotuj zasoby aplikacji
Zacznij od PNG 192×192 i 512×512, potem sprawdź platformy. Ścieżki względne odnoszą się do URL manifestu. Maksymalne 256px w IcoJet nie zastępuje PNG 512px.
Zaprojektuj wersję maskable
Ważne elementy umieść w centralnym kole o promieniu 40% szerokości. Tło rozciągnij do krawędzi. purpose="maskable" stosuj tylko po sprawdzeniu takiego projektu.
Sprawdź instalację
Przejrzyj manifest i podgląd maski w przeglądarce, potem zainstaluj na urządzeniu. Porównaj zwykłą i maskowalną wersję. Starą instalację porównaj z nową przed zmianą rysunku.
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Źródła i dalsza lektura
MDN — Manifest icons ↗web.dev — Web app manifest ↗