---
url: "/favvy/design.md"
description: "The Favvy Figma plugin works by letting you select a single square Figma layer and automatically converting it into a favicon package to use on your website."
---

# Designing your favicon frame in Figma

> The Favvy Figma plugin works by letting you select a single square Figma layer and automatically converting it into a favicon package to use on your website.

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

To prepare your Figma frame for exporting to a favicon package using Favvy, your Figma layer _must be a square aspect ratio_, where the width and height are identical (eg. **512x512** pixels).

The quickest way to do this is to create a new blank Figma frame on your page, set both the width and height for your new favicon frame Figma to `512` pixels, and then drag and drop the icon you'd like to use for your favicon into the new Figma frame you've just created, and resize it as needed to fit the 512x512 frame.

For the best results, you should use SVG vector layers inside your Figma frame to ensure that the exported favicons are as sharp as possible.

> **Tip:** **If you'd like your favicons to have a transparent background**, ensure you remove the _fill_ from your new Figma frame that you created above. If not, you can set this to have any fill you like.