如何修改Flutter的Chrome PWA安装图标？

步骤1：准备自定义图标资源 #

• 准备多尺寸的PNG格式图标，推荐制作192x192px、512x512px两种尺寸，确保图标清晰无多余白边。
• 在Flutter项目的web/目录下新建icons文件夹，将制作好的图标放入其中。

步骤2：修改Web Manifest配置 #

打开项目根目录下的web/manifest.json文件，找到icons数组，替换默认图标配置为你的自定义图标：

"icons": [
    {
        "src": "icons/自定义图标名-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "icons/自定义图标名-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
]

• 将代码中的「自定义图标名」替换为你实际的图标文件名。
• 确保src路径和图标存放位置完全匹配。

步骤3：更新HTML页面的图标引用 #

打开web/index.html文件，找到页面头部的图标链接标签，替换为自定义图标路径：

<link rel="icon" type="image/png" href="icons/自定义图标名-192x192.png">
<link rel="apple-touch-icon" href="icons/自定义图标名-192x192.png">

步骤4：验证修改效果 #

• 执行命令flutter build web重新构建Web项目。
• 运行构建后的文件，在Chrome中打开页面，点击地址栏的安装按钮，即可看到替换后的自定义安装图标。
• 也可通过Chrome开发者工具的「Application」面板查看Manifest信息，确认图标配置已生效。

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