---
url: "/ja/favvy/export.md"
description: "Figmaのレイヤーを選択したら、Favvyプラグインの**Export Favicons**ボタンをクリックして、本番用のコードとファビコンの.zipファイルを生成します。"
---

# Figmaのフレームをファビコンにエクスポートする

> Figmaのレイヤーを選択したら、Favvyプラグインの**Export Favicons**ボタンをクリックして、本番用のコードとファビコンの.zipファイルを生成します。

[Video](/assets/videos/favvy/create/export-favicons.mp4)

> **Note:** **選択するレイヤーは、幅と高さが同じ（例：** 512x512**ピクセル）正方形である必要があります。** 正方形ではないレイヤーを選択した場合は、Favvyでお知らせします。

**Export Favicons**ボタンは、正方形のレイヤーを1つ選択するまで、またFavvyが現在のファビコン一式を生成している間は使用できません。ボタンにカーソルを合わせると、使用できない理由が表示されます。次のエクスポートを始める前に、生成が終わるまでお待ちください。

**Export Favicons**ボタンをクリックすると、**HTML code for your website's <head> tag**ウィンドウが表示されます。Figmaから`.zip`ファイルをパソコンにダウンロードするには、Favvyプラグインの**Download favicons .zip file**ボタンをクリックします。

> **Tip:** **Figmaからダウンロードしたファイルの保存** Figmaの**デスクトップアプリ**を使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、**Webブラウザ**でFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンの**Downloads**フォルダに保存されます）。

## Favvyでエクスポートした.zipファイルの中身 {#what-s-in-the-exported-favvy-zip-file}

選択したエクスポート形式に応じて、Favvyからエクスポートされる`.zip`ファイルに含まれる可能性のあるファイルは、以下のとおりです。

- `android-chrome-192x192.png`
- `android-chrome-512x512.png`
- `apple-touch-icon.png`
- `favicon.ico`
- `favicon.svg`
- `head.html`
- `site.webmanifest`

## Favvyのその他のエクスポートオプション {#other-favvy-export-options}

ファビコンをエクスポートする前に、必要に応じてWebサイト名とテーマカラーを指定できます。Favvyは、Webサイト名、テーマカラー、プラットフォームの切り替え設定をFigmaファイルごとに記憶します。

### Website Name {#website-name}

**Website Name**入力フィールドにWebサイト名を入力すると、エクスポートされる`site.webmanifest`ファイルの`name`フィールドと`short_name`フィールドに自動で追加されます。

`site.webmanifest`ファイルはプログレッシブWebアプリ（PWA）で使用されます。詳しくは、MDN Web Docsの[Webアプリマニフェストの解説](https://developer.mozilla.org/en-US/docs/Web/Manifest)をご覧ください。

### Theme Colour {#theme-colour}

**Theme Colour**入力フィールドにHEXカラーコードを入力する（またはカラーピッカーを使う）と、``タグ用に生成されるコードの`theme-color`フィールドに自動で追加され、iOSのスプラッシュスクリーンの背景にも使用されます。

### Sizes & Platforms {#sizes-platforms}

**Default (Required)** は常に含まれます。**iOS (Icons)** と**Android (PWA Icons)** はデフォルトでオンになっており、不要な場合はオフにできます。iOSのスプラッシュスクリーンを追加するには**iOS (PWA Splash Screen)** をオンにします。この設定には、**iOS (Icons)** がオンになっている必要があります。