I am experimenting with flutter for web and cannot find information how to configure the icon.
It should be possible, because taphero_web did it somehow. I reviewed their sources and could not find the image they have for the site:
I host my app with codemagic.io. Any ideas?
Glad you ask! As the owner of that project I can tell you how I did it:
UPDATE: With PWA support and Flutter 3
1- Inside your /web folder (to be pushed to the server), add a /icons folder (if your don't have it already).
2- Once you're there, you need to upload your set of images with websites like this one.
3- Is going to look something like this:
4- You should have a manifest.json and is going to look something like this:
{
"name": "Tap Hero",
"short_name": "Tap Hero",
"start_url": ".",
"display": "standalone",
"background_color": "#000000", // any HEX color works
"theme_color": "#000000", // any HEX color works
"description": "anything you want here",
"orientation": "portrait" // or changed as you wish
"prefer_related_application": false,
"icons": [
{
"src": "\/icons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/icons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/icons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/icons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/icons/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/icons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
5- Once you did all that, add the rest of the icons inside your index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tap Hero</title>
<meta name="description" content="Tap Hero">
<meta name="keywords" content="Flutter, Tap, Hero, Game">
<meta name="author" content="Mariano Zorrilla">
<meta name="theme-color" content="#6200EA" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<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">
<!-- Main Favicon -->
<link rel="icon" type="image/pg" href="favicon/png"/>
<!-- ALTERNATIVE <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
<link rel="manifest" href="icons/manifest.json">
<meta name="msapplication-TileColor" content="#6200EA">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
/web and or manifest.json files are corrupted/broken/etc you can delete the entire file and do "flutter create ." that will generate everything again for you and can do a new try every single time.
I started following the instructions in Mariano Zorilla's answer but found it is much simpler if you only want to set the Favicon for your Flutter Web App.
Select the "Generate only 16x16 favicon.ico" option and download the icon file.
In web/ folder, replace the default flutter favicon.png with you new generated favicon.ico file
In web/index.html file,
replace:
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
with:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.To configure your favicon for flutter web, just replace the file at path ./web/favicon.png with your own icon and then run flutter build web.
Expected to find fonts for (MaterialIcons, packages/cupertino_icons/CupertinoIcons), but found (MaterialIcons). This usually means you are referring to font families in an IconData class but not including them in the assets section of your pubspec.yaml, are missing the package that would include them, or are missing "uses-material-design: trueFont asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 7588 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app. flutter doctor -v [√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.19042.1889], locale en-ZA) • Flutter version 3.13.0 on channel stable at C:\src\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision efbf63d9c6 (6 weeks ago), 2023-08-15 21:05:06 -0500 • Engine revision 1ac611c64e • Dart version 3.1.0 In your project, go to the root of your project and replace
/web/favicon.png with a 32*32 image/web/icons/Icon-192.png with a 192*192 image/web/icons/Icon-512.png with a 512*512 image/web/icons/Icon-maskable-192.png with a 192*192 image/web/icons/Icon-maskable-512.png with a 512*512 imageflutter build web should now always take those files.
This also considers the Install app functionality.
Also as an option you can use this package to manage icons all over Flutter app platforms flutter_launcher_icons
it will do everything you need after specifying icons configuration and running command flutter pub run flutter_launcher_icons:main or dart run flutter_launcher_icons:main
flutter_launcher_icons. For now, I need to manually replace the favicon.png file with each new release. Is there any permanent solution?
flutter_launcher_icons, which is mainly for mobile apps (Android/iOS) and currently does not support Flutter web.just use the same dimensions and the icon names with the respect of the size and add your own icons and overwrite the generated ones..
I have used https://romannurik.github.io/ and it's quite satisfying for me since i started my journey in android and then flutter to generate the icons and also android icons ...
