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

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 the web 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.

Answer 3

• 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 4

You could set the onGenerateTitle property of your MaterialApp widget, and provide a callback function to build your title. The onGenerateTitle callback is called each time the WidgetsApp rebuilds. This is useful if you want the title of your page to change dynamically or if you want to produce a localized title.

MaterialApp(
  ...
  onGenerateTitle: (BuildContext context) {
    return AppLocalizations.of(context).myTitle;
  }
  ...
);

Answer 5

If you're wondering how to change the app name on your device's homepage, you can update the "name" and "short_name" values in web/manifest.json:

"name": "Ideasky",
"short_name": "Ideasky",