---
url: "/ja/favvy/design.md"
description: "Favvy Figmaプラグインでは、正方形のFigmaレイヤーを1つ選択するだけで、Webサイトで使えるファビコン一式に自動で変換できます。"
---

# Figmaでファビコン用のフレームをデザインする

> Favvy Figmaプラグインでは、正方形のFigmaレイヤーを1つ選択するだけで、Webサイトで使えるファビコン一式に自動で変換できます。

[Video](/assets/videos/favvy/create/design-favicon.mp4)

Favvyでファビコン一式としてエクスポートできるようにFigmaのフレームを準備するには、Figmaのレイヤーが*縦横比1:1の正方形*で、幅と高さが同じ（例：**512x512**ピクセル）である必要があります。

いちばん手早い方法は、ページ上に空白のFigmaフレームを新しく作成し、ファビコン用の新しいフレームの幅と高さをどちらも`512`ピクセルに設定することです。次に、ファビコンに使いたいアイコンを作成したばかりのFigmaフレームにドラッグ＆ドロップし、512x512のフレームに収まるよう必要に応じてサイズを調整します。

最良の結果を得るには、Figmaフレーム内でSVGのベクターレイヤーを使用して、エクスポートされるファビコンができるだけシャープになるようにしてください。

> **Tip:** **ファビコンの背景を透明にしたい場合は、** 上で作成した新しいFigmaフレームから*塗り*を削除してください。透明にしない場合は、好きな塗りを設定できます。