---
url: "/pt/favvy/export.md"
description: "Depois de selecionar sua camada do Figma, clique no botão **Export Favicons** do Favvy para gerar o código e um arquivo .zip de favicons a partir dela."
---

# Exportar seu frame do Figma como favicons

> Depois de selecionar sua camada do Figma, clique no botão **Export Favicons** do Favvy para gerar o código e um arquivo .zip de favicons a partir dela.

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

> **Note:** **A camada selecionada precisa ter proporção quadrada**, com largura e altura idênticas (por exemplo, **512x512** pixels). O Favvy avisa se você selecionar uma camada que não é quadrada.

O botão **Export Favicons** fica indisponível até você selecionar uma única camada quadrada e enquanto o Favvy gera o pacote de favicons atual. Passe o cursor sobre o botão para ver por que ele está indisponível e espere a geração terminar antes de começar outra exportação.

Depois de clicar no botão **Export Favicons**, você verá a janela **HTML code for your website's <head> tag**. Para baixar o arquivo `.zip` do Figma para o seu computador, clique no botão **Download favicons .zip file** no plugin Favvy.

> **Tip:** **Salvar arquivos baixados do Figma**. Se você usa o **app desktop** do Figma, vai aparecer uma janela para baixar o arquivo. Já se você usa o Figma em um **navegador**, por padrão o arquivo é baixado automaticamente para o seu computador (normalmente para a pasta **Downloads**).

## O que vem no arquivo .zip exportado pelo Favvy? {#what-s-in-the-exported-favvy-zip-file}

Dependendo dos formatos de exportação que você selecionar, a lista completa de arquivos que podem vir no `.zip` exportado pelo Favvy é esta:

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

## Outras opções de exportação do Favvy {#other-favvy-export-options}

Antes de exportar seus favicons, você pode informar o nome do seu site e uma cor de tema, se quiser. O Favvy lembra o nome do site, a cor de tema e as opções de plataforma de cada arquivo do Figma.

### Website Name {#website-name}

Preencher o campo **Website Name** com o nome do seu site adiciona esse nome automaticamente aos campos `name` e `short_name` do arquivo `site.webmanifest` exportado.

O arquivo `site.webmanifest` é usado em progressive web apps (PWA) e, se tiver interesse, você pode [ler mais sobre o manifesto de web app](https://developer.mozilla.org/en-US/docs/Web/Manifest) na MDN Web Docs.

### Theme Colour {#theme-colour}

Preencher o campo **Theme Colour** com um código de cor HEX (ou usar o seletor de cores) adiciona essa cor automaticamente aos campos `theme-color` e também a usa como fundo das telas de abertura do iOS no código gerado para a tag ``.

### Sizes & Platforms {#sizes-platforms}

**Default (Required)** é sempre incluído. **iOS (Icons)** e **Android (PWA Icons)** vêm ativados por padrão, e você pode desativá-los se não precisar deles. Ative **iOS (PWA Splash Screen)** para adicionar uma tela de abertura do iOS; essa opção exige que **iOS (Icons)** esteja ativado.