How to configure icon for my flutter web application?

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.

  1. Upload your image in an icon-creating website like the one Mariano suggested.

  1. Select the "Generate only 16x16 favicon.ico" option and download the icon file.

  2. In web/ folder, replace the default flutter favicon.png with you new generated favicon.ico file

  3. 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">

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:

Icons Folder

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>
  1. IF (by any chance) your /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.

Tags:

Flutter

Recent Posts