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.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

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：49x49像素
      • ic_launcher_foreground.png：162x162px
    • mipmap-mdpi/
      • ic_launcher.png & ic_launcher_round.png：48x48像素
      • ic_launcher_foreground.png：108x108px
    • mipmap-xhdpi/
      • ic_launcher.png & ic_launcher_round.png：96x96像素
      • ic_launcher_foreground.png：216x216px
    • mipmap-xxhdpi/
      • ic_launcher.png & ic_launcher_round.png：144x144像素
      • ic_launcher_foreground.png：324x324px
    • mipmap-xxxhdpi/
      • ic_launcher.png & ic_launcher_round.png：192x192像素
      • ic_launcher_foreground.png：432x432px

如果无法使用 tauri icon，我们建议改为查看 Android 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，带有额外图标
  • 1x、2x、3x 中为 29px，带有额外图标
  • 1x、2x、3x 中为 40px，带有额外图标
  • 2x、3x 时为 60px
  • 1x、2x 时为 76px
  • 83.5px 2x
  • 2x 中的 512px 保存为 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 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站