Favicons are small but essential branding elements representing your web application in browser tabs, bookmarks, and app shortcuts. Adding a favicon to your Flutter Web app enhances your app's branding but also makes your app look more professional and recognizable.
With Flutter 3's built-in web support and PWA capabilities, it's easier than ever to set custom favicons and app icons across different platforms, such as the Web, Android, and iOS.
Let's explore how to add a favicon to your Flutter Web app.
What is a Favicon?
A Favicon is a small icon displayed on the browser tab or bookmark bar to represent a website. It’s typically a 16x16 or 32x32 PNG or ICO image. Modern websites support multiple icon sizes for better display across different devices and platforms.
Step-by-Step Guide to Add Favicon in Flutter Web App
1. Create the Icons Folder
Navigate to your Flutter project folder and create a folder named icons inside the /web directory.
your_project/
│
├─ web/
│ ├─ icons/
│ └─ index.html
└─ lib/
2. Generate Icon Sizes
Web apps require icons in different sizes for various platforms like:
- Android
- iOS
- Web
Instead of manually resizing images, you can generate icons automatically using tools like:
👉 favicon.io
👉 Real Favicon Generator
Upload your app logo, and the generator will create all the required icon sizes automatically.
3. Add manifest.json
Create a manifest.json file inside your icons folder. This file defines your app's icons and display properties on Android and PWA platforms.
Example manifest.json:
{
"name": "Tap Hero",
"short_name": "Tap Hero",
"start_url": ".",
"display": "standalone",
"background_color": "#6200EA",
"theme_color": "#6200EA",
"description": "Flutter PWA Game",
"orientation": "portrait",
"icons": [
{
"src": "/icons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/icons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}
4. Link Favicon in index.html
Open index.html inside your /web folder and add the following lines inside the <head> tag:
<!-- Favicon for Web -->
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<!-- PWA Manifest -->
<link rel="manifest" href="icons/manifest.json">
<meta name="theme-color" content="#6200EA">
5. Register Service Worker for PWA
To make your app installable as a PWA, register the service worker in your index.html file:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
6. Testing the Favicon
Run your app locally with the following command:
flutter build web
flutter serve
Open your app in the browser, and you will see the favicon in the browser tab.
🎯 Bonus Tip: How to Reset Favicon
If your favicon is not updating due to browser cache, press:
1. Ctrl + F5 (Windows)
2. Cmd + Shift + R (Mac)
7. Regenerate Broken Files (Optional)
If your manifest.json or web folder is corrupted or not working, regenerate them using:
flutter create .
This will recreate all missing web files automatically.
Final Folder Structure
your_project/
├─ web/
│ ├─ icons/
│ │ ├─ favicon-32x32.png
│ │ ├─ apple-icon-180x180.png
│ │ ├─ manifest.json
│ ├─ index.html
│ └─ flutter_service_worker.js
└─ lib/
PWA Installation Prompt
When your app is opened in Chrome or Safari, users will automatically see an Install App prompt on their devices.
Conclusion
Adding a favicon and PWA support to your Flutter Web app makes your app feel like a native app with enhanced branding and user experience. Your app will not only look better but also provide:
✅ Offline Access
✅ App Installation
✅ Platform Icons
✅ Automatic Version Updates
Top comments (0)