Your selected layer must be a square aspect ratio where the width and height are identical (eg. 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 will automatically add it to the browserconfig.xml file exported by Favvy, and also use it for the theme-color fields in the generated code for your <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 and/or Android if you don’t need them by toggling the switches in the Favvy plugin.