修改应用图标
Flutter 应用在发布前，需要为各个目标平台设置自定义的应用图标。不同平台有不同的图标尺寸要求和配置方式。本章将逐一介绍 Android、iOS、Web、鸿蒙以及 Windows、macOS、Linux 桌面端修改应用图标的方法。
图标设计要求
在开始之前，请先准备一张高分辨率的图标源文件：
| 项目 | 要求 |
|---|---|
| 源图尺寸 | 建议 1024 × 1024 像素及以上 |
| 格式 | PNG（带透明通道）；Windows 端还需提供 ICO 格式，macOS 端还需提供 ICNS 格式 |
| 形状 | 正方形，圆角由各平台自动裁剪 |
| 安全区 | 图标内容四周建议留出 10%~15% 的边距，避免被裁切 |
TIP
各平台会自动对图标应用不同圆角（如 iOS 的超椭圆、Android 的自适应图标），所以源图不需要手动加圆角。
方式一：使用 flutter_launcher_icons 插件（推荐）
flutter_launcher_icons 是社区最常用的图标生成工具，可以一键为 Android、iOS、Web、Windows、macOS、Linux 六个平台生成正确尺寸的图标文件。
WARNING
flutter_launcher_icons 不支持鸿蒙平台，鸿蒙图标需手动替换（见下方鸿蒙章节）。
1. 添加依赖
在 pubspec.yaml 中添加：
dev_dependencies:
flutter_launcher_icons: ^0.14.3然后执行：
flutter pub get2. 配置图标
在 pubspec.yaml 中添加 flutter_launcher_icons 配置段：
flutter_launcher_icons:
android: true # 为 Android 生成图标
ios: true # 为 iOS 生成图标
web:
generate: true # 为 Web 生成图标
windows:
generate: true # 为 Windows 生成图标
macos:
generate: true # 为 macOS 生成图标
linux: true # 为 Linux 生成图标
image_path: "assets/icon/app_icon.png" # 图标源文件路径
# Android 自适应图标（推荐）
adaptive_icon_background: "#FFFFFF" # 背景色
adaptive_icon_foreground: "assets/icon/app_icon_foreground.png" # 前景图
# 可选：分别指定各平台图标
# image_path_android: "assets/icon/android.png"
# image_path_ios: "assets/icon/ios.png"WARNING
image_path 指向的文件必须存在，否则会报错。建议将图标放在 assets/icon/ 目录下。
3. 运行生成命令
# 生成所有平台的图标
dart run flutter_launcher_icons
# 或者使用 Flutter 3.x 的方式
flutter pub run flutter_launcher_icons生成完成后，各平台的图标文件会被自动替换。
4. 验证结果
# Android：查看是否生成了自适应图标
ls android/app/src/main/res/mipmap-*/ic_launcher.png
# iOS：查看 Assets 中的 AppIcon
ls ios/Runner/Assets.xcassets/AppIcon.appiconset/
# Web：查看 favicon 和图标
ls web/icons/ web/favicon.png
# Windows：查看 ICO 文件
ls windows/runner/resources/app_icon.ico
# macOS：查看 AppIcon
ls macos/Runner/Assets.xcassets/AppIcon.appiconset/
# Linux：查看 PNG 图标
ls linux/*.png方式二：手动替换各平台图标
如果需要精细控制，可以手动替换各平台的图标文件。
Android
Android 需要为不同分辨率提供不同尺寸的图标，并支持自适应图标（Adaptive Icon）。
图标尺寸
| 密度限定符 | 文件夹 | 尺寸（px） |
|---|---|---|
mdpi | mipmap-mdpi | 48 × 48 |
hdpi | mipmap-hdpi | 72 × 72 |
xhdpi | mipmap-xhdpi | 96 × 96 |
xxhdpi | mipmap-xxhdpi | 144 × 144 |
xxxhdpi | mipmap-xxxhdpi | 192 × 192 |
普通图标
将对应尺寸的图标文件放入 android/app/src/main/res/ 下的各个 mipmap-* 文件夹，文件名为 ic_launcher.png：
android/app/src/main/res/
├── mipmap-mdpi/ic_launcher.png
├── mipmap-hdpi/ic_launcher.png
├── mipmap-xhdpi/ic_launcher.png
├── mipmap-xxhdpi/ic_launcher.png
└── mipmap-xxxhdpi/ic_launcher.png自适应图标（Android 8.0+）
自适应图标由 前景层 和 背景层 组成，支持不同形状的遮罩裁剪。
文件结构：
android/app/src/main/res/
├── mipmap-anydpi-v26/
│ └── ic_launcher.xml ← 自适应图标配置
├── mipmap-xxxhdpi/
│ ├── ic_launcher.png ← 兼容旧版的后备图标
│ ├── ic_launcher_foreground.png ← 前景图（432×432）
│ └── ic_launcher_background.png ← 背景图（432×432）
└── ...（其他密度文件夹同理）ic_launcher.xml 的内容：
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>自适应图标尺寸
前景和背景图尺寸均为 432 × 432 像素，安全区为中间 312 × 312 像素（约 72%）。超出安全区的内容可能被系统裁切。
修改应用名称（Android）
编辑 android/app/src/main/AndroidManifest.xml：
<application
android:label="我的应用"> <!-- 修改这里 -->iOS
iOS 通过 Asset Catalog 管理图标，所有尺寸统一放在一个 .appiconset 文件夹中。
图标尺寸
| 用途 | 尺寸（px） | 文件名示例 |
|---|---|---|
| iPhone 通知 | 20 × 20 @2x / @3x | Icon-40.png / Icon-60.png |
| iPhone Spotlight | 29 × 29 @2x / @3x | Icon-58.png / Icon-87.png |
| iPhone App | 60 × 60 @2x / @3x | Icon-120.png / Icon-180.png |
| iPad 通知 | 20 × 20 @1x / @2x | Icon-20.png / Icon-40.png |
| iPad Spotlight | 29 × 29 @1x / @2x | Icon-29.png / Icon-58.png |
| iPad App | 76 × 76 @1x / @2x | Icon-76.png / Icon-152.png |
| App Store | 1024 × 1024 | Icon-1024.png |
替换步骤
打开
ios/Runner/Assets.xcassets/AppIcon.appiconset/目录将对应尺寸的图标文件放入该目录
更新
Contents.json配置文件（通常只需替换图片文件，无需修改 JSON）：
{
"images" : [
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "Icon-40.png",
"scale" : "2x"
},
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "Icon-60.png",
"scale" : "3x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "Icon-58.png",
"scale" : "2x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "Icon-180.png",
"scale" : "3x"
},
{
"size" : "1024x1024",
"idiom" : "universal-platform",
"filename" : "Icon-1024.png",
"scale" : "1x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}WARNING
iOS 图标不要包含透明通道，否则会被 App Store 审核拒绝。请确保图标背景是不透明的。
修改应用名称（iOS）
编辑 ios/Runner/Info.plist：
<key>CFBundleName</key>
<string>我的应用</string> <!-- 修改这里 -->
<key>CFBundleDisplayName</key>
<string>我的应用</string> <!-- 显示名称 -->HarmonyOS
WARNING
flutter_launcher_icons 不支持鸿蒙平台，鸿蒙图标只能通过手动替换方式配置。
鸿蒙平台的图标配置在 harmony/ 目录下。
替换步骤
- 进入鸿蒙资源目录：
harmony/entry/src/main/resources/
├── base/
│ └── media/
│ └── app_icon.png ← 替换此文件
└── ...将图标文件替换为自定义图标，建议尺寸 216 × 216 像素
如需针对不同设备密度提供图标，可以在对应的资源限定目录下放置不同尺寸的图标：
harmony/entry/src/main/resources/
├── base/media/app_icon.png ← 默认
├── sdpi/media/app_icon.png ← 小密度
├── mdpi/media/app_icon.png ← 中密度
├── ldpi/media/app_icon.png ← 大密度
├── xldpi/media/app_icon.png ← 超大密度
└── xxldpi/media/app_icon.png ← 超超大密度修改应用名称（HarmonyOS）
编辑 harmony/entry/src/main/resources/base/element/string.json：
{
"string": [
{
"name": "EntryAbility_label",
"value": "我的应用"
}
]
}Web
Web 平台的图标配置在 web/ 目录下。
需要替换的文件
| 文件 | 用途 | 推荐尺寸 |
|---|---|---|
web/favicon.png | 浏览器标签页图标 | 32 × 32 |
web/icons/Icon-192.png | Android Chrome 添加到主屏幕 | 192 × 192 |
web/icons/Icon-512.png | Android Chrome 启动画面 | 512 × 512 |
web/icons/Icon-maskable-192.png | Maskable 图标（安全区适配） | 192 × 192 |
web/icons/Icon-maskable-512.png | Maskable 图标（安全区适配） | 512 × 512 |
修改 manifest.json
编辑 web/manifest.json，更新图标配置和应用名称：
{
"name": "我的应用",
"short_name": "我的应用",
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/Icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/Icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}修改 index.html 中的 meta 标签
编辑 web/index.html，更新 <head> 中的图标引用：
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="apple-touch-icon" href="icons/Icon-192.png"/>Maskable 图标
Maskable 图标用于支持不同形状的应用图标（如 Android 的圆形、圆角方形等）。设计时请将重要内容放在中心 80% 的安全区内，边缘可能被裁切。
Windows
Windows 平台的应用图标使用 ICO 格式，包含多种尺寸。
图标文件位置
windows/runner/resources/
└── app_icon.ico ← 替换此文件制作 ICO 文件
ICO 文件需要包含多种尺寸，推荐包含以下规格：
| 尺寸（px） | 用途 |
|---|---|
| 16 × 16 | 标题栏小图标 |
| 32 × 32 | 任务栏图标 |
| 48 × 48 | 大图标模式 |
| 256 × 256 | 超大图标 / 应用详情 |
可以使用以下方式制作 ICO 文件：
方式 A：使用 ImageMagick（命令行）
# 从 PNG 生成包含多尺寸的 ICO
magick convert app_icon.png -define icon:auto-resize=256,48,32,16 app_icon.ico方式 B：使用在线工具
访问 ConvertICO 或 ICO Convert，上传 256 × 256 以上的 PNG 图片，选择需要的尺寸后下载。
方式 C：使用 GIMP
- 打开 PNG 图片，导出为
.ico格式 - 在导出对话框中勾选需要的尺寸（16、32、48、256）
替换步骤
- 将生成的
app_icon.ico文件复制到windows/runner/resources/目录，覆盖原文件 - 确保 ICO 文件名仍为
app_icon.ico
修改应用名称（Windows）
编辑 windows/runner/Runner.rc：
1 VERSIONINFO
...
BEGIN
BLOCK "StringFileInfo"
BEGIN
BLOCK "040904e4"
BEGIN
VALUE "CompanyName", "你的公司" "\0"
VALUE "FileDescription", "我的应用" "\0" ← 应用描述
VALUE "ProductName", "我的应用" "\0" ← 应用名称
VALUE "ProductVersion", "1.0.0" "\0"
END
END
ENDmacOS
macOS 平台的应用图标使用 ICNS 格式，通过 Asset Catalog 管理。
图标文件位置
macos/Runner/Assets.xcassets/
└── AppIcon.appiconset/
├── app_icon_16.png ← 16×16 @1x
├── app_icon_16_2x.png ← 16×16 @2x（32px）
├── app_icon_32.png ← 32×32 @1x
├── app_icon_32_2x.png ← 32×32 @2x（64px）
├── app_icon_64.png ← 32×32 @2x / 64×64 @1x
├── app_icon_128.png ← 128×128 @1x
├── app_icon_128_2x.png ← 128×128 @2x（256px）
├── app_icon_256.png ← 256×256 @1x
├── app_icon_256_2x.png ← 256×256 @2x（512px）
├── app_icon_512.png ← 512×512 @1x
├── app_icon_512_2x.png ← 512×512 @2x（1024px）
└── Contents.json ← 图标配置文件图标尺寸
| 逻辑尺寸 | @1x（px） | @2x（px） | 文件 |
|---|---|---|---|
| 16 × 16 | 16 | 32 | app_icon_16.png / app_icon_16_2x.png |
| 32 × 32 | 32 | 64 | app_icon_32.png / app_icon_32_2x.png |
| 128 × 128 | 128 | 256 | app_icon_128.png / app_icon_128_2x.png |
| 256 × 256 | 256 | 512 | app_icon_256.png / app_icon_256_2x.png |
| 512 × 512 | 512 | 1024 | app_icon_512.png / app_icon_512_2x.png |
替换步骤
- 准备一张 1024 × 1024 的 PNG 源图
- 使用工具将源图裁切为上述各尺寸的 PNG 文件
- 将裁切后的文件放入
macos/Runner/Assets.xcassets/AppIcon.appiconset/目录
使用 iconutil 制作（macOS 原生方式）：
# 1. 创建 iconset 目录
mkdir AppIcon.iconset
# 2. 从源图生成各尺寸（需 macOS 环境）
sips -z 16 16 app_icon.png --out AppIcon.iconset/icon_16x16.png
sips -z 32 32 app_icon.png --out AppIcon.iconset/icon_16x16@2x.png
sips -z 32 32 app_icon.png --out AppIcon.iconset/icon_32x32.png
sips -z 64 64 app_icon.png --out AppIcon.iconset/icon_32x32@2x.png
sips -z 128 128 app_icon.png --out AppIcon.iconset/icon_128x128.png
sips -z 256 256 app_icon.png --out AppIcon.iconset/icon_128x128@2x.png
sips -z 256 256 app_icon.png --out AppIcon.iconset/icon_256x256.png
sips -z 512 512 app_icon.png --out AppIcon.iconset/icon_256x256@2x.png
sips -z 512 512 app_icon.png --out AppIcon.iconset/icon_512x512.png
sips -z 1024 1024 app_icon.png --out AppIcon.iconset/icon_512x512@2x.png
# 3. 生成 ICNS 文件
iconutil -c icns AppIcon.iconset -o AppIcon.icnsTIP
flutter_launcher_icons 会自动处理 macOS 的图标生成，推荐优先使用插件方式。手动替换时需注意文件名必须与 Contents.json 中的 filename 字段一致。
修改应用名称（macOS）
编辑 macos/Runner/Configs/AppInfo.xcconfig：
PRODUCT_NAME = 我的应用 ← 应用名称
PRODUCT_BUNDLE_IDENTIFIER = com.example.myAppLinux
Linux 平台的应用图标使用 PNG 格式，遵循 FreeDesktop.org 图标主题规范。
图标文件位置
linux/flutter/
└── generated_pluginregistrar.cc # 不涉及图标
# 图标实际位于项目配置中
# 默认图标在 CMakeLists.txt 中指定Flutter Linux 项目的图标配置在 linux/ 目录下，主要通过以下文件管理：
linux/
├── CMakeLists.txt ← 构建配置
└── my_app.png ← 应用图标（需手动添加）图标尺寸
| 尺寸（px） | 用途 | 安装路径 |
|---|---|---|
| 16 × 16 | 小图标 | icons/hicolor/16x16/apps/ |
| 32 × 32 | 中等图标 | icons/hicolor/32x32/apps/ |
| 48 × 48 | 常用尺寸 | icons/hicolor/48x48/apps/ |
| 64 × 64 | 大图标 | icons/hicolor/64x64/apps/ |
| 128 × 128 | 超大图标 | icons/hicolor/128x128/apps/ |
| 256 × 256 | 最大图标 | icons/hicolor/256x256/apps/ |
| 512 × 512 | 高分辨率 | icons/hicolor/512x512/apps/ |
替换步骤
方式 A：使用 flutter_launcher_icons 插件（推荐）
插件会自动处理 Linux 图标的生成和 CMakeLists.txt 配置。
方式 B：手动配置
准备一张 512 × 512 的 PNG 图标
将图标放入
linux/目录：
cp app_icon.png linux/my_app.png- 编辑
linux/CMakeLists.txt，添加图标安装配置：
# 在文件末尾的 install() 部分添加
install(FILES "my_app.png"
DESTINATION "${INSTALL_DATADIR}/icons/hicolor/256x256/apps"
RENAME "com.example.my_app.png")- 编译安装后，系统会在
/usr/share/icons/hicolor/256x256/apps/中找到图标
WARNING
Linux 应用图标文件名通常使用应用的 反向域名 命名（如 com.example.my_app.png），而不是简单的 my_app.png。
Desktop Entry 配置
Linux 桌面通过 .desktop 文件识别应用，图标路径在该文件中指定。编辑 linux/my_app.desktop：
[Desktop Entry]
Name=我的应用 ← 应用名称
Comment=我的 Flutter 应用 ← 应用描述
Icon=com.example.my_app ← 图标名称（不带扩展名）
Exec=my_app
Type=Application
Categories=Utility;Icon 字段可以是：
- 图标主题名称（推荐）：如
com.example.my_app，系统会在图标主题目录中查找 - 绝对路径：如
/opt/my_app/icon.png，直接指向图标文件
修改应用名称汇总
各平台修改应用显示名称的位置：
| 平台 | 文件路径 | 关键字段 |
|---|---|---|
| Android | android/app/src/main/AndroidManifest.xml | android:label |
| iOS | ios/Runner/Info.plist | CFBundleDisplayName |
| Web | web/manifest.json + web/index.html | name / short_name / <title> |
| HarmonyOS | harmony/.../element/string.json | EntryAbility_label |
| Windows | windows/runner/Runner.rc | ProductName |
| macOS | macos/Runner/Configs/AppInfo.xcconfig | PRODUCT_NAME |
| Linux | linux/my_app.desktop | Name |
常见问题
图标替换后没有生效？
- Android：运行
flutter clean后重新构建，确保旧的构建缓存被清除 - iOS：在 Xcode 中 Product → Clean Build Folder（⇧⌘K），然后重新运行
- Web：清除浏览器缓存（Ctrl+Shift+R 强制刷新）
- Windows：删除
build/windows/目录后重新构建 - macOS：删除
build/macos/目录后重新构建 - Linux：删除
build/linux/目录后重新构建，并确认.desktop文件中的 Icon 路径正确
iOS 图标有黑边？
iOS 图标不允许透明通道。请将图标的透明区域填充为白色或其他背景色：
# 使用 ImageMagick 填充透明区域为白色
magick convert icon.png -background white -flatten icon_opaque.pngAndroid 自适应图标被裁切太多？
自适应图标的安全区是中间 72% 的区域。请将图标的主要内容缩小到中心区域，四周留出足够边距。
flutter_launcher_icons 生成后 iOS 图标缺失？
检查 pubspec.yaml 中的 image_path 是否正确，确保源图尺寸至少为 1024 × 1024 像素。然后删除 ios/Runner/Assets.xcassets/AppIcon.appiconset/ 目录下的旧文件，重新运行生成命令。
Windows 图标模糊？
ICO 文件中必须包含 256 × 256 尺寸。如果只包含小尺寸图标，Windows 在大图标视图下会放大显示导致模糊。建议 ICO 文件至少包含 16、32、48、256 四种尺寸。
macOS 图标显示为默认图标？
确保 AppIcon.appiconset/ 中的 Contents.json 文件里 filename 字段与实际文件名一致。如果使用 Xcode，可以在 Assets.xcassets 中直接拖入图标并检查是否有警告。
Linux 图标不显示？
- 检查
.desktop文件中Icon字段的值是否正确 - 如果使用图标主题名称，确认图标已安装到
/usr/share/icons/hicolor/对应尺寸目录下 - 如果使用绝对路径，确认路径指向实际存在的文件
- 更新图标缓存：
sudo gtk-update-icon-cache -f /usr/share/icons/hicolor/
推荐工作流
1. 准备 1024×1024 源图 → assets/icon/app_icon.png
2. 配置 pubspec.yaml → 添加 flutter_launcher_icons 配置
3. 运行生成命令 → dart run flutter_launcher_icons
4. 检查各平台输出 → 确认图标文件已更新
5. 清理重新构建 → flutter clean && flutter run
6. 真机验证 → 在各平台设备上确认图标效果TIP
建议在项目初期就配置好 flutter_launcher_icons，这样后续只需修改源图并重新运行生成命令即可更新所有平台的图标，保持一致性。