> ## Documentation Index
> Fetch the complete documentation index at: https://enterprise-docs.dify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# アイコンのカスタマイズ

デフォルトのリソースファイルを置き換えることで、Web インターフェースをカスタマイズできます。このガイドでは、主要な視覚要素を置き換え、カスタマイズされたコンテンツでアプリケーションを起動する方法を説明します。

## 前提条件

* Docker と Docker Compose がインストールされていること
* 置き換え用のカスタマイズされた視覚ファイルが準備されていること

## カスタマイズの手順

1. **リソースファイルの置き換え**
   `web_assets` ディレクトリに以下のカスタマイズされたファイルを追加します：
   * `logo-site.png` メインナビゲーションバーのロゴ
   * `favicon.ico` ブラウザタブのアイコン

2. **カスタマイズされたリソースで起動**
   基本設定と web リソース設定を使用してアプリケーションを起動します：

   ```bash theme={null}
   docker compose -f docker-compose.yaml -f docker-compose.with-web-assets.yaml up -d
   ```

## ファイル仕様

| ファイル            | 用途         | 推奨仕様                  |
| --------------- | ---------- | --------------------- |
| `logo-site.png` | 左上のナビバーロゴ  | PNG フォーマット            |
| `favicon.ico`   | ブラウザタブアイコン | ICO フォーマット、48×48 ピクセル |

## 重要な注意事項

* 🔄 **再起動が必要**：リソースファイルを変更した後、変更を確認するにはコンテナの再起動が必要です。
* 🖼️ **リソース要件**：正しく認識されるように、ファイル名とフォーマットを完全に一致させてください。

## ディレクトリ構造の例

```bash theme={null}
project/
├── web_assets/
│   ├── logo-site.png    # カスタマイズされたロゴ
│   └── favicon.ico      # カスタマイズされたサイトアイコン
├── docker-compose.yaml
└── docker-compose.with-web-assets.yaml
```