Flutter Web中Chrome浏览器标签页名称与图标自定义方法

一、自定义标签页名称 #

静态修改（全局默认） #

直接编辑web/index.html文件中的<title>标签，替换默认文本为你的应用名称：

<title>你的自定义应用名称</title>

动态修改（随页面切换变化） #

如果需要根据不同页面动态调整标签页名称，可以引入dart:html库操作document.title：

import 'dart:html' as html;

// 在页面初始化或切换时调用
html.document.title = "当前页面的自定义标题";

二、自定义标签页图标（Favicon） #

Flutter Web的图标文件默认存放在web/icons/目录，按以下步骤替换配置：

1. 替换图标文件
   准备多尺寸的图标文件（推荐16x16、32x32、48x48、192x192、512x512），覆盖web/icons/目录下的同名默认文件。
2. 更新index.html中的图标引用
   打开web/index.html，确认<link>标签的图标路径和文件名匹配：

<link rel="icon" type="image/png" sizes="32x32" href="icons/Icon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/Icon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/Icon-180.png">

3. 同步manifest.json配置
   编辑web/manifest.json，确保icons数组中的路径和尺寸与替换的图标一致：

"icons": [
    {
        "src": "icons/Icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "icons/Icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
]

生效说明 #

修改完成后，重新运行flutter run -d chrome或执行flutter build web构建生产版本，新的名称和图标就会在浏览器标签页显示。

内容的提问来源于stack exchange，提问作者Matanyos. Antar