Ili website yako ibadilike kuwa Progressive Web App (PWA) yenye full experience, lazima uwe na icons sahihi kwa different devices na screen sizes. Icons hizi ndizo zinazoonekana kwenye home screen, splash screen, na browser tabs.
1️⃣ Sizes Za Icons Za PWA
PWA inahitaji icons kwa sizes tofauti. Hapa ni orodha ya kawaida:
Size Usage
48x48 Android low-res
72x72 Android medium-res
96x96 Browser toolbar
144x144 Android high-res
152x152 iOS home screen
192x192 Android home screen
384x384 Android splash screen
512x512 Play Store & large splash screens
Unaweza kutumia icons moja tu na kuresize kwa online tools, au kutengeneza zote kwa design software kama Figma, Canva, au Photoshop.
2️⃣ Creating Icons Using Online Tool
Unaweza kutumia favicon & PWA icon generator kama hizi:
https://realfavicongenerator.net/
https://appicon.co/
Steps:
Upload image yako (recommended 1024x1024 PNG).
Chagua platform zote (Android, iOS, Desktop).
Download icons zote na manifest snippet.
Hifadhi icons kwenye folder /images/icons/ au /icons/ kwenye website yako.
3️⃣ Update Manifest.json
Hakikisha icons zote zimetajwa kwenye manifest.json yako:
"icons": [
{
"src": "/images/icons/icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
Hii itahakikisha PWA yako ina look professional kwenye all devices.
4️⃣ Testing Icons
Fungua website kwenye Chrome/Edge.
Angalia Install prompt.
Install app kwenye home screen.
Splash screen inapaswa kuonyesha icon sahihi na theme-color uliyo set.
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509