|
| 1 | +--- |
| 2 | +title: アプリ・アイコン |
| 3 | +sidebar: |
| 4 | + order: 1 |
| 5 | +--- |
| 6 | + |
| 7 | +{/* TODO: More platform specific explanations like macOS requiring padding in the icon (waiting for https://github.com/tauri-apps/tauri/pull/11037) */} |
| 8 | + |
| 9 | +import CommandTabs from '@components/CommandTabs.astro'; |
| 10 | +import TranslationNote from '@components/i18n/TranslationNote.astro'; |
| 11 | + |
| 12 | +Tauri は、Tauri ロゴに基づいたデフォルトのアイコン・セットが付けられて公開されますが、自分のアプリケーションをリリースする際にはそうしたくはないかもしれません。このデフォルト処理を回避するために、Tauri には、受け取った入力ファイル(デフォルトでは `"./app-icon.png"` )からさまざまなプラットフォームに必要なすべてのアイコンを作成する「`icon` コマンド」が提供されています。 |
| 13 | + |
| 14 | +:::note[アイコンファイルのタイプに関する注記] |
| 15 | + |
| 16 | +- `icon.icns` = macOS 用 |
| 17 | +- `icon.ico` = Windows 用 |
| 18 | +- `*.png` = Linux 用 |
| 19 | +- `Square*Logo.png` & `StoreLogo.png` = 現状は未使用、「AppX/MS Store」用 |
| 20 | + |
| 21 | +一部のアイコン・タイプは、上記で想定しているプラットフォーム以外でも使用される場合があります(特に `png`)。そのため、特定のプラットフォームのみを対象にビルドする場合でも、すべてのアイコン・タイプを含めておくことをお勧めします。 |
| 22 | + |
| 23 | +::: |
| 24 | + |
| 25 | +<TranslationNote lang="ja"> |
| 26 | + |
| 27 | +**AppX** Windows アプリケーションのインストールに必要なすべてのファイル(メタデータ、ファイル、資格情報も)を含んだアプリケーションの配布とインストールに使用される配布可能なパッケージ・ファイル形式。[[参考](https://docs.fileformat.com/ja/programming/appx/)] |
| 28 | + |
| 29 | +</TranslationNote> |
| 30 | + |
| 31 | +## コマンドの使用法 |
| 32 | + |
| 33 | +<CommandTabs |
| 34 | + npm="npm run tauri icon" |
| 35 | + yarn="yarn tauri icon" |
| 36 | + pnpm="pnpm tauri icon" |
| 37 | + cargo="cargo tauri icon" |
| 38 | + deno="deno task tauri icon" |
| 39 | +/> |
| 40 | + |
| 41 | +```console |
| 42 | +> pnpm tauri icon --help |
| 43 | + |
| 44 | +Generate various icons for all major platforms |
| 45 | +〔主要プラットフォーム向けのさまざまなアイコンを生成〕 |
| 46 | + |
| 47 | +Usage: pnpm run tauri icon [OPTIONS] [INPUT] |
| 48 | +〔使用法: pnpm run tauri icon [OPTION 指定] [引数 INPUT]〕 |
| 49 | + |
| 50 | +Arguments:〔引数〕 |
| 51 | + [INPUT] Path to the source icon (squared PNG or SVG file with transparency) [default: ./app-icon.png] |
| 52 | + 〔ソース・アイコンへのパス(背景が透明な正方形の PNG または SVG ファイル)[デフォルトのパス設定: ./app-icon.png]〕 |
| 53 | + |
| 54 | +Options:〔オプション指定〕 |
| 55 | + -o, --output <OUTPUT> Output directory. Default: 'icons' directory next to the tauri.conf.json file |
| 56 | + 〔-o、出力先 出力先ディレクトリ。デフォルト: tauri.conf.json ファイルの隣にある 'icons' ディレクトリ〕 |
| 57 | + -v, --verbose... Enables verbose logging |
| 58 | + 〔-v、詳細レポートを表示 詳細ログを有効化〕 |
| 59 | + -p, |
| 60 | + --png <PNG> Custom PNG icon sizes to generate. When set, the default icons are not generated |
| 61 | + 〔-p, --png、PNG 生成する PNG アイコンのサイズをカスタマイズします。設定すると、デフォルトのアイコンは生成されません。〕 |
| 62 | + --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] |
| 63 | + 〔-p, --ios、IOS_COLOR iOS アイコンの背景色。W3C の CSS カラーモジュール・レベル 4 で定義された文字列。デフォルト: #fff(白)〕 |
| 64 | + -h, --help Print help |
| 65 | + 〔-h、ヘルプ ヘルプを印字〕 |
| 66 | + -V, --version Print version |
| 67 | + 〔-V、バージョン バージョンを印字〕 |
| 68 | +``` |
| 69 | + |
| 70 | +「**デスクトップ** アイコン」はすべて、デフォルトでは `src-tauri/icons` フォルダに配置され、ビルドされたあなたのアプリに自動的に含められます。もしアイコンを別の場所から取得したい場合は、`tauri.conf.json` ファイルの以下の部分を編集してください: |
| 71 | + |
| 72 | +```json |
| 73 | +{ |
| 74 | + "bundle": { |
| 75 | + "icon": [ |
| 76 | + "icons/32x32.png", |
| 77 | + "icons/128x128.png", |
| 78 | + |
| 79 | + "icons/icon.icns", |
| 80 | + "icons/icon.ico" |
| 81 | + ] |
| 82 | + } |
| 83 | +} |
| 84 | +``` |
| 85 | + |
| 86 | +「**モバイル** アイコン」は、Xcode および Android Studio プロジェクト内に直接配置されます。 |
| 87 | + |
| 88 | +## アイコンを自分で作成する |
| 89 | + |
| 90 | +アイコンを自分で作成したい場合、たとえば、小さいサイズ用にシンプルなデザインにしたいとか、CLI による内部イメージのサイズ変更に依存したくない場合には、その自作のアイコンがいくつかの要件を満たす必要があることに注意してください: |
| 91 | + |
| 92 | +- `icon.icns`: [`icns`] ファイル(Apple Icon Image format)に必要なレイヤーの「サイズと名前」は [Tauri リポジトリ](英語サイト)に記載されています。 |
| 93 | +- `icon.ico`: [`ico`] ファイル(ICO file format)には、16、24、32、48、64、256 ピクセルの各レイヤーが含まれている必要があります。_開発中の_ ICO 画像を最適に表示するには、32 ピクセルのレイヤーを最初のレイヤーにする必要があります。 |
| 94 | +- `png`: PNG アイコンの要件は、「幅 == 高さ」、「RGBA」(RGB +透明度)、「ピクセルあたり32ビット」(各チャンネルあたり8ビット)です。デスクトップ用で一般的に求められているサイズは、32、128、256、512 ピクセルです。少なくとも `tauri icon` の出力サイズである「 `32x32.png`」、「 `128x128.png`」、「 `[email protected]`」、「 `icon.png`」を準備しておくことを推奨します。 |
| 95 | + |
| 96 | +### Android 用 |
| 97 | + |
| 98 | +Android(アンドロイド)用でも、上記と同じ要件を満たす PNG アイコン(ただしサイズが異なるもの)が必要になります。アイコンは Android Studio プロジェクトの中に直接配置する必要があります: |
| 99 | + |
| 100 | +- `src-tauri/gen/android/app/src/main/res/` |
| 101 | + - `mipmap-hdpi/` |
| 102 | + - `ic_launcher.png` & `ic_launcher_round.png`: 49x49px |
| 103 | + - `ic_launcher_foreground.png`: 162x162px |
| 104 | + - `mipmap-mdpi/` |
| 105 | + - `ic_launcher.png` & `ic_launcher_round.png`: 48x48px |
| 106 | + - `ic_launcher_foreground.png`: 108x108px |
| 107 | + - `mipmap-xhdpi/` |
| 108 | + - `ic_launcher.png` & `ic_launcher_round.png`: 96x96px |
| 109 | + - `ic_launcher_foreground.png`: 216x216px |
| 110 | + - `mipmap-xxhdpi/` |
| 111 | + - `ic_launcher.png` & `ic_launcher_round.png`: 144x144px |
| 112 | + - `ic_launcher_foreground.png`: 324x324px |
| 113 | + - `mipmap-xxxhdpi/` |
| 114 | + - `ic_launcher.png` & `ic_launcher_round.png`: 192x192px |
| 115 | + - `ic_launcher_foreground.png`: 432x432px |
| 116 | + |
| 117 | +もし `tauri icon` が利用できない場合は、その代わりに Android Studio の [Image Asset Studio] を確認することをお勧めします。 |
| 118 | + |
| 119 | +### iOS 用 |
| 120 | + |
| 121 | +iOS 用にも、上記要件を満たす PNG アイコンが必要ですが、**透過なし**で、サイズも異なります。また、Xcode プロジェクト内の`src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/` に直接配置する必要があります。以下のアイコンが必要です: |
| 122 | + |
| 123 | +- 20px の 1x、2x、3x 版と、2x 版の追加アイコン |
| 124 | +- 29px の 1x、2x、3x 版と、2x 版の追加アイコン |
| 125 | +- 40px の 1x、2x、3x 版と、2x 版の追加アイコン |
| 126 | +- 60px の 2x、3x 版 |
| 127 | +- 76px の 1x、2x 版 |
| 128 | +- 83.5px の 2x 版 |
| 129 | +- 512px の 2x 版を `[email protected]` として保存 |
| 130 | + |
| 131 | +ファイル名は `AppIcon-{size}x{size}@{scaling}{extra}.png` という形式になります。20px アイコンの場合であれば、20x20、40x40、60x60 の各サイズのアイコンをそれぞれ `[email protected]` 、 `[email protected]`、 `[email protected]` という名前で保存し、 `2x` 版を追加で、 `[email protected]`(「追加アイコン」)として保存する必要があります。 |
| 132 | + |
| 133 | +[Tauri リポジトリ]: https://github.com/tauri-apps/tauri/blob/1.x/tooling/cli/src/helpers/icns.json |
| 134 | +[`icns`]: https://en.wikipedia.org/wiki/Apple_Icon_Image_format |
| 135 | +[`ico`]: https://ja.wikipedia.org/wiki/ICO_(ファイルフォーマット) |
| 136 | +[image asset studio]: https://developer.android.com/studio/write/create-app-icons?hl=ja |
| 137 | + |
| 138 | +<div style="text-align: right;"> |
| 139 | + 【※ この日本語版は、「Jul 21, 2025 英語版」に基づいています】 |
| 140 | +</div> |
0 commit comments