Ili Faulink App ionekane vizuri kwenye:
✔️ Android
✔️ iPhone/iPad
✔️ Desktop PC
✔️ Home Screen
✔️ Play Store (ukitaka kufikisha huko)
Unahitaji kutengeneza icons kwa sizes zote zinazokubalika kimataifa na kuziweka kwenye folder:
/faulink.com/icons/
🖼️ 1. Aina za Icons unazohitaji
Hizi ndizo sizes zinazotambulika kwa PWA:
Size Kutumika Wapi
72×72 Android Low DPI
96×96 Android
128×128 Desktop
144×144 Windows Tile
152×152 iOS
192×192 PWA Main Icon
256×256 Desktop High DPI
384×384 Large displays
512×512 PWA Installation Icon
MUHIMU:
Lazima icons ziwe PNG, background isiwe transparent (colored background).
🛠️ 2. Njia Rahisi ya Kutengeneza Icons
1️⃣ Tengeneza icon moja kubwa size 1024×1024 px
– tumia Photoshop, Canva, Figma, Gimp, au mobile app.
2️⃣ Tumia website hii kubenerate sizes zote:
👉 https://app-manifest.firebaseapp.com/
au
👉 https://favicon.io/favicon-converter/
3️⃣ Download icons zote → unzip → ziweke hapa:
/icons/
Mf:
/icons/icon-72.png
/icons/icon-96.png
/icons/icon-128.png
/icons/icon-144.png
/icons/icon-152.png
/icons/icon-192.png
/icons/icon-256.png
/icons/icon-384.png
/icons/icon-512.png
📝 3. Update manifest.json ili zitambue icons
Badilisha manifest.json yako ionekane hivi:
{
"name": "Faulink App",
"short_name": "Faulink",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2b2b2b",
"icons": [
{ "src": "/icons/icon-72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "/icons/icon-96.png", "sizes": "96x96", "type": "image/png" },
{ "src": "/icons/icon-128.png", "sizes": "128x128", "type": "image/png" },
{ "src": "/icons/icon-144.png", "sizes": "144x144", "type": "image/png" },
{ "src": "/icons/icon-152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-256.png", "sizes": "256x256", "type": "image/png" },
{ "src": "/icons/icon-384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
📱 4. Hakikisha iPhone (iOS) Icons zipo kwenye <head>
Ongeza kwenye header ya HTML:
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152.png">
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512.png">
🎯 Matokeo ya Hatua Hii
Ukimaliza:
✅ App yako itaonekana vizuri kwenye Android & iPhone
✅ Watu wataweza ku-install kama App
✅ Hakutakuwa na error ya “No suitable icon found”
✅ Play Store itaikubali (ukitaka kuipeleka)
🔗 Kujifunza Zaidi
🌐 Faulink Official Website
https://www.faulink.com/
📘 Jifunze Web Design & Programming
https://www.faulink.com/excel_mifumo.php
📲 Msaada WhatsApp
https://wa.me/255693118509