Exporting your Figma frame to favicons

After you've selected your Figma layer, click the Export Favicons button in the Favvy plugin to generate production ready code and a favicon .zip file from your layer.

Your selected layer must be a square aspect ratio where the width and height are identical (for example, 512x512 pixels). Favvy will let you know if you've selected a layer that isn't square.

After clicking the Export Favicons button, you'll see a confirmation screen letting you know that your favicons are ready to download. To download the .zip file from Figma to your computer, you can click the Download favicons .zip file button in the Favvy plugin.

Saving file downloads from Figma If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

What's in the exported Favvy .zip file? ​

Depending on the export formats you select, the full list of possible files included in the exported .zip file from Favvy are listed below:

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

Other Favvy export options ​

Before exporting your favicons, you can optionally specify your website name and a theme colour.

Website Name ​

Populating the Website Name input field with your website name will automatically add it to the name and short_name fields in the exported site.webmanifest file.

The site.webmanifest file is used in progressive web apps (PWA), and if you're interested, you can read more about the web app manifest on the MDN web docs.

Theme Colour ​

Populating the Theme Colour input field with a HEX colour code (or using the color picker) will automatically add it to the browserconfig.xml file exported by Favvy, the theme-color fields, and also use it for any iOS splash screen backgrounds, in the generated code for your <head></head> tag.

Sizes & Platforms ​

By default, Favvy exports a favicon package that covers all browser and devices, however, you can optionally turn off support for iOS (icons and/or splash screen support) and/or Android if you don't need them by toggling the switches in the Favvy plugin.