---
url: "/favvy/export.md"
description: "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."
---

# 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.

[Video](/assets/videos/favvy/create/export-favicons.mp4)

> **Note:** **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.

> **Tip:** **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](https://developer.mozilla.org/en-US/docs/Web/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 `` 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.