---
url: "/es/favvy/export.md"
description: "Tras seleccionar tu capa de Figma, haz clic en el botón **Export Favicons** de Favvy para generar código listo para producción y un .zip de favicons."
---

# Exportar tu frame de Figma a favicons

> Tras seleccionar tu capa de Figma, haz clic en el botón **Export Favicons** de Favvy para generar código listo para producción y un .zip de favicons.

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

> **Note:** **La capa seleccionada tiene que ser cuadrada**, con el mismo ancho y alto (por ejemplo, **512x512** píxeles). Favvy te avisará si has seleccionado una capa que no es cuadrada.

El botón **Export Favicons** no está disponible hasta que seleccionas una sola capa cuadrada, ni mientras Favvy genera el paquete de favicons actual. Pasa el cursor por encima del botón para ver por qué no está disponible, y espera a que termine la generación antes de empezar otra exportación.

Después de hacer clic en el botón **Export Favicons**, verás la ventana **HTML code for your website's <head> tag**. Para descargar el archivo `.zip` desde Figma a tu ordenador, haz clic en el botón **Download favicons .zip file** del plugin Favvy.

> **Tip:** **Guardar archivos descargados desde Figma** Si usas la **aplicación de escritorio** de Figma, verás un aviso para descargar el archivo. En cambio, si usas Figma en un **navegador web**, el archivo se descargará automáticamente en tu ordenador (normalmente en la carpeta **Descargas**).

## ¿Qué contiene el archivo .zip que exporta Favvy? {#what-s-in-the-exported-favvy-zip-file}

Según los formatos de exportación que selecciones, estos son todos los archivos que puede incluir el `.zip` que exporta Favvy:

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

## Otras opciones de exportación de Favvy {#other-favvy-export-options}

Antes de exportar tus favicons, puedes indicar, si quieres, el nombre de tu web y un color de tema. Favvy recuerda el nombre de la web, el color de tema y los interruptores de plataforma de cada archivo de Figma.

### Website Name {#website-name}

Si escribes el nombre de tu web en el campo **Website Name**, se añadirá automáticamente a los campos `name` y `short_name` del archivo `site.webmanifest` exportado.

El archivo `site.webmanifest` se usa en las aplicaciones web progresivas (PWA) y, si te interesa, puedes [leer más sobre el manifiesto de aplicaciones web](https://developer.mozilla.org/en-US/docs/Web/Manifest) en MDN Web Docs.

### Theme Colour {#theme-colour}

Si escribes un código de color HEX en el campo **Theme Colour** (o usas el selector de color), se añadirá automáticamente a los campos `theme-color` del código generado para tu etiqueta ``, y también se usará como fondo de las pantallas de inicio de iOS.

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

**Default (Required)** se incluye siempre. **iOS (Icons)** y **Android (PWA Icons)** están activados por defecto y puedes desactivarlos si no los necesitas. Activa **iOS (PWA Splash Screen)** para añadir una pantalla de inicio de iOS; para ello, **iOS (Icons)** tiene que estar activado.