How can you set title and icon for a flutter web app?

Issue

What I’m trying to do is build a flutter web app that, when displayed in the browser, the tab shows an icon and a title (as currently it only shows the world icon and the localhost… title).

Actual Result :

Actual Result

Desired Result :

Desired Result

Edit:
I can now add the title, as this is set in the main function

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: Icon(Icons.menu, color: Colors.white,),
      title: Text(_your title here_),
    )
    ...
  );
}

So, the only thing I need to edit is the favicon

Solution

Assuming you already have a favicon.ico file, placing it inside the your_project_dir\web folder alongside index.html as shown below is enough for the browser to pick it up.

enter image description here

Following is the result of placing a favicon.ico' in theweb` folder. Make sure to do a clean build.

enter image description here

In other case you can manually mention it using the link tag inside your index.html as explained here in this Wikipedia page.

Answered By – Abhilash Chandran

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *