Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: 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.. Machine-readable page: /favvy/design.md.

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.

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 (for example, 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.

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.