पाठ 16 / 29
Web App Icons
PWA installation और home screen display के लिए web app icons को create और optimize करें।
Icon Requirements
PWA installation के लिए कम से कम 192x192 और 512x512 PNG icons प्रदान करें। Icons को home screens, app switchers और loading screens पर use किया जाता है। Text और important details के लिए safe areas के साथ square formats का उपयोग करें।
Manifest Icon Configuration
Manifest.json में अलग-अलग contexts के लिए purpose field के साथ icons को configure करें।
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}
]
Output:
Icons properly configured for installation and display across devices.
एक आम गलती
Icons के लिए transparent backgrounds का उपयोग न करें—वे different platforms पर गलत display हो सकते हैं। Solid colors का उपयोग करें या maskable versions प्रदान करें।
Icon Design Best Practices
सभी devices और contexts पर काम करने वाले adaptable, scalable icons बनाएँ।