Iconos de la Aplicación

Tauri viene con un conjunto de iconos por defecto basado en su logo. Esto NO es lo que quieres cuando publicas tu aplicación. Para remediar esta situación común, Tauri proporciona el comando icon que tomará un archivo de entrada ("./app-icon.png" por defecto) y creará todos los iconos necesarios para las distintas plataformas.

Uso del Comando

npm run tauri icon

yarn tauri icon

pnpm tauri icon

deno task tauri icon

cargo tauri icon

> 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

Los iconos de escritorio se colocarán en tu carpeta src-tauri/icons por defecto, donde se incluirán en tu aplicación compilada automáticamente. Si quieres obtener tus iconos desde una ubicación diferente, puedes editar esta parte del archivo tauri.conf.json:

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

¡Los iconos móviles se colocarán directamente en los proyectos de Xcode y Android Studio!

Crear iconos manualmente

Si prefieres construir estos iconos tú mismo, por ejemplo si quieres tener un diseño más simple para tamaños pequeños o porque no quieres depender del redimensionado de imágenes interno de la CLI, debes asegurarte de que tus iconos cumplan con algunos requisitos:

icon.icns: Los tamaños y nombres de capa requeridos para el archivo icns se describen en el repositorio de Tauri
icon.ico: El archivo ico debe incluir capas para 16, 24, 32, 48, 64 y 256 píxeles. Para una visualización óptima de la imagen ICO en desarrollo, la capa de 32px debería ser la primera capa.
png: Los requisitos para los iconos png son: ancho == alto, RGBA (RGB + Transparencia) y 32 bits por píxel (8 bits por canal). Los tamaños comúnmente esperados en escritorio son 32, 128, 256 y 512 píxeles. Recomendamos al menos igualar la salida de tauri icon: 32x32.png, 128x128.png, 128x128@2x.png e icon.png.

Android

En Android necesitarás iconos png con los mismos requisitos pero en diferentes tamaños. También necesitarán colocarse directamente en el proyecto de Android Studio:

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

Si no se puede utilizar tauri icon, recomendamos consultar el Image Asset Studio de Android Studio en su lugar.

iOS

En iOS necesitarás iconos png con los mismos requisitos pero sin transparencia y en diferentes tamaños. También necesitarán colocarse directamente en el proyecto de Xcode en src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/. Se esperan los siguientes iconos:

20px en 1x, 2x, 3x, con un icono extra
29px en 1x, 2x, 3x, con un icono extra
40px en 1x, 2x, 3x, con un icono extra
60px en 2x, 3x
76px en 1x, 2x
83.5px en 2x
512px en 2x guardado como AppIcon-512@2x.png

Los nombres de archivo están en el formato AppIcon-{size}x{size}@{scaling}{extra}.png. Para los iconos de 20px esto significa que necesitas iconos en tamaños 20x20, 40x40 y 60x60 nombrados como AppIcon-20x20@1x.png, AppIcon-20x20@2x.png, AppIcon-20x20@3x.png y 2x guardados adicionalmente como AppIcon-20x20@2x-1.png (“icono extra”).

Apoya en Open Collective Patrocina en GitHub