如何修改Flutter应用Web端的网站图标

flutter_launcher_icons 暂未原生支持Web端图标生成，可通过以下两种方式完成配置：

方案一：手动替换（无依赖、兼容性最好） #

Flutter Web项目的图标资源都存放在项目根目录的web/文件夹下，直接替换对应文件即可：

• 提前准备图标素材：导出192x192、512x512两个尺寸的PNG图标，同时准备一份多规格打包的favicon.ico（通常包含16x16、32x32尺寸，用于浏览器标签页显示）
• 替换web/icons/目录下的默认Icon-192.png、Icon-512.png文件，保持文件名和原有命名一致即可
• 替换web/根目录下的默认favicon.ico文件
• 打开web/manifest.json，核对icons字段下的文件路径、尺寸配置和你替换的文件匹配，可按需同步修改应用名称、主题色字段
• 执行flutter clean清除旧构建缓存，重新编译部署后强制刷新浏览器（建议用无痕模式验证，避免本地缓存干扰）即可看到新图标

方案二：使用支持全平台的图标生成插件 #

如果不想手动导出、替换多尺寸图标，可以用支持Web端的图标生成类库一键生成：

• 在pubspec.yaml的dev_dependencies节点引入支持全平台的图标生成依赖
• 按照插件规范配置源图标路径，开启Web端生成开关
• 执行插件对应的生成命令，工具会自动生成Web端所需的多尺寸图标、favicon文件，同时自动更新manifest.json的配置

注意：部分版本的生成插件不会自动修改web/index.html中的favicon引用路径，生成后建议手动核对，确保<link rel="icon">标签的href属性指向正确的图标文件路径。

常见踩坑 #

• 替换后图标不生效：90%以上是缓存问题，先清浏览器缓存、清Flutter构建缓存，重新build后再验证，不要直接在本地debug模式的热重载状态下看结果
• 图标显示发虚：提供的源图标分辨率不要低于512x512，不要用小尺寸图拉伸生成大规格图标

内容的提问来源于stack exchange，提问作者Pythopath