9 应用图标

原文链接: https://tauri.app/develop/icons/

Tauri 自带一套基于其 logo 的默认图标集。发布应用时这并不是你想要的。为解决这个常见问题，Tauri 提供了 icon 命令：它以某个输入文件（默认是 "./app-icon.png"）为基础，生成各平台所需的所有图标。

命令用法

包管理器

• npm
• yarn
• pnpm
• cargo
• deno

1

npm run tauri icon

1

yarn tauri icon

1

pnpm tauri icon

1

cargo tauri icon

1

deno task tauri icon

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Generate various icons for all major platforms

Usage: pnpm run tauri icon [OPTIONS] [INPUT]

Arguments:
  [INPUT]  Path to the source icon (squared PNG or SVG file with transparency) [default: ./app-icon.png]

Options:
  -o, --output <OUTPUT>        Output directory. Default: 'icons' directory next to the tauri.conf.json file
  -v, --verbose...             Enables verbose logging
  -p, --png <PNG>              Custom PNG icon sizes to generate. When set, the default icons are not generated
      --ios-color <IOS_COLOR>  The background color of the iOS icon - string as defined in the W3C's CSS Color Module Level 4 <https://www.w3.org/TR/css-color-4/> [default: #fff]
  -h, --help                   Print help
  -V, --version                Print version

桌面端图标默认会放在你的 src-tauri/icons 文件夹中，并会自动包含进你构建的应用里。如果你想从其它位置获取图标，可以修改 tauri.conf.json 文件中的这一部分：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

移动端图标会直接放进 Xcode 和 Android Studio 项目中！

手动创建图标

如果你更愿意自己构建这些图标——例如你想为小尺寸设计更简洁的样式，或者不想依赖 CLI 内部的图像缩放——你必须确保图标满足一些要求：

• icon.icns：icns 文件所需的图层尺寸与名称在 Tauri 仓库中有说明
• icon.ico：ico 文件必须包含 16、24、32、48、64 和 256 像素的图层。为了让 ICO 图像_在开发时_有最佳显示效果，32px 图层应当是第一个图层。
• png：png 图标的要求是：宽 == 高、RGBA（RGB + 透明度）、每像素 32 位（每通道 8 位）。桌面上常见的期望尺寸是 32、128、256 和 512 像素。我们建议至少与 tauri icon 的输出保持一致：32x32.png、128x128.png、128x128@2x.png 和 icon.png。

Android

在 Android 上你需要满足同样要求但尺寸不同的 png 图标。它们也需要直接放进 Android Studio 项目：

• src-tauri/gen/android/app/src/main/res/
  • mipmap-hdpi/
    • ic_launcher.png 和 ic_launcher_round.png：49x49px
    • ic_launcher_foreground.png：162x162px
  • mipmap-mdpi/
    • ic_launcher.png 和 ic_launcher_round.png：48x48px
    • ic_launcher_foreground.png：108x108px
  • mipmap-xhdpi/
    • ic_launcher.png 和 ic_launcher_round.png：96x96px
    • ic_launcher_foreground.png：216x216px
  • mipmap-xxhdpi/
    • ic_launcher.png 和 ic_launcher_round.png：144x144px
    • ic_launcher_foreground.png：324x324px
  • mipmap-xxxhdpi/
    • ic_launcher.png 和 ic_launcher_round.png：192x192px
    • ic_launcher_foreground.png：432x432px

如果无法使用 tauri icon，我们建议改用 Android Studio 的 Image Asset Studio。

iOS

在 iOS 上你需要满足同样要求但不带透明度、尺寸不同的 png 图标。它们也需要直接放进 Xcode 项目的 src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/ 中。需要以下图标：

• 20px 的 1x、2x、3x，外加一个额外图标
• 29px 的 1x、2x、3x，外加一个额外图标
• 40px 的 1x、2x、3x，外加一个额外图标
• 60px 的 2x、3x
• 76px 的 1x、2x
• 83.5px 的 2x
• 512px 的 2x，保存为 AppIcon-512@2x.png

文件名格式为 AppIcon-{size}x{size}@{scaling}{extra}.png。对 20px 图标来说，这意味着你需要 20x20、40x40 和 60x60 三种尺寸，分别命名为 AppIcon-20x20@1x.png、AppIcon-20x20@2x.png、AppIcon-20x20@3x.png，并且 2x 还要额外保存为 AppIcon-20x20@2x-1.png（即“额外图标”）。