Make your website installable on mobile devices like a native app. Users can add it to their home screen with a custom icon.
Step 1: Create Icons
Generate three PNG icons from your logo:
- icon-180.png (180×180px) — for iOS
- icon-192.png (192×192px) — for Android
- icon-512.png (512×512px) — for Android HD
Tool: Use iloveimg.com/resize-image or any image editor to resize your logo.
Step 2: Upload Icons
Upload the three icons to your website, for example in /images/ or /icons/ folder.
Step 3: Create manifest.json
Create a file named manifest.json and upload it to your website root (same folder as index.html):
{
"name": "Your Site Name",
"short_name": "YourSite",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Step 4: Add Meta Tags to HTML
Add these lines in the <head> section of your HTML pages:
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="YourSite">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icon-180.png">
<link rel="icon" sizes="192x192" href="/images/icon-192.png">
<link rel="manifest" href="/manifest.json">Step 5: Test on Mobile
iOS (Safari): Open yoursite.com → Tap Share button → "Add to Home Screen"
Android (Chrome): Open yoursite.com → Tap menu (⋮) → "Install app" or "Add to Home screen"
Done! Your website is now installable like a native app.
