Εικονίδια PWA: αποφύγετε κομμένα λογότυπα και μικρά λευκά πλαίσια
Οι εγκατεστημένες εφαρμογές ιστού χρησιμοποιούν εικονίδια manifest. Ο εκκινητής μπορεί να εφαρμόσει μάσκα σχήματος.
Προετοιμάστε πόρους
Ξεκινήστε με PNG 192×192 και 512×512 και ελέγξτε τις πλατφόρμες. Οι σχετικές διαδρομές βασίζονται στο URL του manifest. Το μέγιστο 256px του IcoJet δεν αντικαθιστά PNG 512px.
Σχεδιάστε έκδοση maskable
Κρατήστε τα σημαντικά στοιχεία στον κεντρικό κύκλο με ακτίνα 40% του πλάτους. Επεκτείνετε το φόντο ως τις άκρες. Χρησιμοποιήστε purpose="maskable" μόνο μετά τον έλεγχο του σχεδίου.
Δοκιμάστε την εγκατάσταση
Ελέγξτε manifest και μάσκα στον φυλλομετρητή, έπειτα εγκαταστήστε στη συσκευή στόχο. Ελέγξτε κανονική και maskable έκδοση. Συγκρίνετε παλιά εγκατάσταση με νέα πριν αλλάξετε το σχέδιο.
{
"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"
}
]
}Πηγές και περαιτέρω ανάγνωση
MDN — Manifest icons ↗web.dev — Web app manifest ↗