Skip to content
Tauri 中文网
指南 手册 博客 Nodejs.cn

应用图标

Tauri 附带基于其徽标的默认图标集。这不是你在发布应用时所需的。为了解决这种常见情况，Tauri 提供了 icon 命令，该命令将接受一个输入文件（默认为 "./app-icon.png"）并创建各种平台所需的所有图标。

¥Tauri ships with a default iconset based on its logo. This is NOT what you want when you ship your application. To remedy this common situation, Tauri provides the icon command that will take an input file ("./app-icon.png" by default) and create all the icons needed for the various platforms.

命令用法

Section titled “命令用法”

¥Command Usage

npm run tauri icon
Terminal window
> pnpm tauri icon --help


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 文件的以下部分：

¥The desktop icons will be placed in your src-tauri/icons folder by default, where they will be included in your built app automatically. If you want to source your icons from a different location, you can edit this part of the tauri.conf.json file:

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

移动图标将直接放入 Xcode 和 Android Studio 项目中！

¥The mobile icons will be placed into the Xcode and Android Studio projects directly!

手动创建图标

Section titled “手动创建图标”

¥Creating icons manually

如果你希望自己构建这些图标，例如，如果你希望在小尺寸下拥有更简单的设计，或者因为你不想依赖 CLI 的内部图片大小调整，则必须确保你的图标满足一些要求：

¥If you prefer to build these icons yourself, for example if you want to have a simpler design for small sizes or because you don’t want to depend on the CLI’s internal image resizing, you must make sure your icons meet some requirements:

  • icon.icns：icns 文件所需的图层大小和名称在 在 Tauri 仓库中 文件中描述。

    ¥icon.icns: The required layer sizes and names for the icns file are described in the Tauri repo

  • icon.ico：ico 文件必须包含 16、24、32、48、64 和 256 像素的图层。为了在开发过程中获得最佳的 ICO 图片显示效果，32px 图层应作为第一层。

    ¥icon.ico: The ico file must include layers for 16, 24, 32, 48, 64 and 256 pixels. For an optimal display of the ICO image in development, the 32px layer should be the first layer.

  • png：png 图标的要求如下：宽度 == 高度，RGBA（RGB + 透明度），以及每像素 32 位（每通道 8 位）。桌面上常见的尺寸为 32、128、256 和 512 像素。我们建议至少匹配 tauri icon 的输出：32x32.png、128x128.png、128x128@2x.png 和 icon.png。

    ¥png: The requirements for the png icons are: width == height, RGBA (RGB + Transparency), and 32bit per pixel (8bit per channel). Commonly expected sizes on desktop are 32, 128, 256, and 512 pixels. We recommend to at least match the output of tauri icon: 32x32.png, 128x128.png, 128x128@2x.png, and icon.png.

Android

Section titled “Android”

在 Android 系统中，你需要具有相同要求但不同大小的 png 图标。它们也需要直接放入 Android Studio 项目中：

¥On Android you will need png icons with the same requirements but in different sizes. They will also need to be placed directly in the Android Studio project:

  • 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。

¥If tauri icon cannot be used, we recommend checking out Android Studio’s Image Asset Studio instead.

iOS

Section titled “iOS”

在 iOS 上，你需要 png 图标，其要求相同，但不包含透明度，且大小不同。它们也需要直接放入 Xcode 项目中的 src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/ 文件中。预期图标如下：

¥On iOS you will need png icons with the same requirements but without transparency and in different sizes. They will also need to be placed directly in the Xcode project into src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/. The following icons are expected:

  • 1x、2x、3x 中为 20px，带有额外图标

    ¥20px in 1x, 2x, 3x, with an extra icon

  • 1x、2x、3x 中为 29px，带有额外图标

    ¥29px in 1x, 2x, 3x, with an extra icon

  • 1x、2x、3x 中为 40px，带有额外图标

    ¥40px in 1x, 2x, 3x, with an extra icon

  • 2x、3x 时为 60px

    ¥60px in 2x, 3x

  • 1x、2x 时为 76px

    ¥76px in 1x, 2x

  • 83.5px 2x

  • 2x 中为 512px，另存为 AppIcon-512@2x.png

    ¥512px in 2x saved as 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（“额外图标”）。

¥The file names are in the format of AppIcon-{size}x{size}@{scaling}{extra}.png. For the 20px icons this means you need icons in sizes 20x20, 40x40 and 60x60 named as AppIcon-20x20@1x.png, AppIcon-20x20@2x.png, AppIcon-20x20@3x.png and 2x saved additionally as AppIcon-20x20@2x-1.png (“extra icon”).

Tauri v2.8 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站