Menu
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?
819
Let's first add the package to pubspec. yaml . Then all you need to do is give your icon path as it is shown and that's all. You can give different paths for Android and IOS as well.
Glad you ask! As the owner of that project I can tell you how I did it:
UPDATE: With PWA support and Flutter 2
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
