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

Question

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 :

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

Answer 1

In order to change the title to what you desire, you need to add the parameter title (Which is a String) to your MaterialApp widget.

return MaterialApp(
  title: "MyTitle", 
  home: MyHomeWidget());

Answer 2

• Edit title

it is the simplest. just use the Title widget on each page or directly inside the materialApp constructor and set title string key to the title text you need. like this:

...
Title(
  color: myColors, //not  important  in web but still required
  title: 'web  page title',
  child: myChildWidget,
),
...

• Edit icon

If your app is only for the web, use the dart:html library to perform change using DOM access. something like this

import 'dart:html';
...
...
updateIcon(String assetIcon){
      LinkElement link = (document.querySelector("link[rel*='icon']") ??
          document.createElement('link')) as LinkElement;
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = assetIcon;
}

if your application is multi-platform, you need to create separate main file for the web like main_web.dart. and declare the previous function inside this file. Now, anywhere you need to set up the icon you just need to call the method after checking the platform using the keyword kIsWeb.

Ex: change icon inside page

...
initState(){
    super.initSate();
    if(kIsWeb){
      WebMixin.updateIcon("assets/home_icon.png"); //WebMixin is just a helper.  replace  it by your  one.
    }
}
...

Answer 3

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.

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

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