---
title: 앱 아이콘
sidebar:
  order: 1
---

{/* TODO: More platform specific explanations like macOS requiring padding in the icon (waiting for https://github.com/tauri-apps/tauri/pull/11037) */}

import CommandTabs from '@components/CommandTabs.astro';
import TranslationNote from '@components/i18n/TranslationNote.astro';

Tauri는 Tauri 로고를 기반으로 한 기본 아이콘 세트가 포함되어 공개되지만, 자신의 애플리케이션을 출시할 때는 그렇게 하고 싶지 않을 수 있습니다. 이 기본 처리를 피하기 위해 Tauri는 받은 입력 파일(기본적으로 `"./app-icon.png"`)에서 다양한 플랫폼에 필요한 모든 아이콘을 만드는 "`icon` 명령"을 제공합니다.

:::note[아이콘 파일 유형에 대한 참고]

- `icon.icns` = macOS용
- `icon.ico` = Windows용
- `*.png` = Linux용
- `Square*Logo.png` & `StoreLogo.png` = 현재 미사용, "AppX/MS Store"용

일부 아이콘 유형은 위에서 가정한 플랫폼 이외에도 사용될 수 있습니다(특히 `png`). 따라서 특정 플랫폼만 대상으로 빌드하는 경우에도 모든 아이콘 유형을 포함하는 것이 좋습니다.

:::

<TranslationNote lang="ko">

**AppX** Windows 애플리케이션 설치에 필요한 모든 파일(메타데이터, 파일, 자격 증명 포함)을 포함한 애플리케이션 배포 및 설치에 사용되는 배포 가능한 패키지 파일 형식. [[참고](https://docs.fileformat.com/ko/programming/appx/)]

</TranslationNote>

## 명령 사용법

<CommandTabs
  npm="npm run tauri icon"
  yarn="yarn tauri icon"
  pnpm="pnpm tauri icon"
  cargo="cargo tauri icon"
  deno="deno task tauri icon"
/>

```console
> pnpm tauri icon --help

Generate various icons for all major platforms
[주요 플랫폼용 다양한 아이콘 생성]

Usage: pnpm run tauri icon [OPTIONS] [INPUT]
[사용법: pnpm run tauri icon [OPTION 지정] [인수 INPUT]]

Arguments:[인수]
  [INPUT]  Path to the source icon (squared PNG or SVG file with transparency) [default: ./app-icon.png]
  [소스 아이콘 경로(투명 배경의 정사각형 PNG 또는 SVG 파일) [기본 경로 설정: ./app-icon.png]]

Options:[옵션 지정]
  -o, --output <OUTPUT>        Output directory. Default: 'icons' directory next to the tauri.conf.json file
  [-o, 출력 대상]              출력 디렉토리. 기본값: tauri.conf.json 파일 옆의 'icons' 디렉토리]
  -v, --verbose...             Enables verbose logging
  [-v, 상세 보고서 표시]        상세 로깅 활성화]
  -p,
      --png <PNG>              Custom PNG icon sizes to generate. When set, the default icons are not generated
      [-p, --png, PNG]             생성할 PNG 아이콘 크기를 사용자 정의합니다. 설정하면 기본 아이콘이 생성되지 않습니다.]
      --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]
      [-p, --ios, IOS_COLOR]   iOS 아이콘의 배경색. W3C의 CSS 색상 모듈 레벨 4에 정의된 문자열. 기본값: #fff(흰색)]
  -h, --help                   Print help
  [-h, 도움말]                   도움말 인쇄]
  -V, --version                Print version
  [-V, 버전]                     버전 인쇄]
```

"**데스크톱** 아이콘"은 모두 기본적으로 `src-tauri/icons` 폴더에 배치되며, 빌드된 앱에 자동으로 포함됩니다. 아이콘을 다른 위치에서 가져오려면 `tauri.conf.json` 파일의 다음 부분을 편집하십시오:

```json
{
  "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`] 파일(Apple Icon Image format)에 필요한 레이어의 "크기와 이름"은 [Tauri 리포지토리](영어 사이트)에 기재되어 있습니다.
- `icon.ico`: [`ico`] 파일(ICO file format)에는 16, 24, 32, 48, 64, 256 픽셀의 각 레이어가 포함되어 있어야 합니다. _개발 중인_ ICO 이미지를 최적으로 표시하려면 32 픽셀 레이어를 첫 번째 레이어로 해야 합니다.
- `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 버전과 2x 버전의 추가 아이콘
- 29px의 1x, 2x, 3x 버전과 2x 버전의 추가 아이콘
- 40px의 1x, 2x, 3x 버전과 2x 버전의 추가 아이콘
- 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`("추가 아이콘")로 저장해야 합니다.

[Tauri 리포지토리]: https://github.com/tauri-apps/tauri/blob/1.x/tooling/cli/src/helpers/icns.json
[`icns`]: https://en.wikipedia.org/wiki/Apple_Icon_Image_format
[`ico`]: https://ko.wikipedia.org/wiki/ICO_(파일_포맷)
[image asset studio]: https://developer.android.com/studio/write/create-app-icons?hl=ko
