---
url: "/de/favvy/export.md"
description: "Klick nach der Auswahl deiner Figma-Ebene im Favvy-Plugin auf **Export Favicons**, um produktionsreifen Code und eine Favicon-ZIP-Datei aus deiner Ebene zu erzeugen."
---

# Deinen Figma-Frame als Favicons exportieren

> Klick nach der Auswahl deiner Figma-Ebene im Favvy-Plugin auf **Export Favicons**, um produktionsreifen Code und eine Favicon-ZIP-Datei aus deiner Ebene zu erzeugen.

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

> **Note:** **Deine ausgewählte Ebene muss quadratisch sein**, Breite und Höhe also identisch (zum Beispiel **512x512** Pixel). Favvy weist dich darauf hin, wenn du eine Ebene ausgewählt hast, die nicht quadratisch ist.

Der Button **Export Favicons** ist nicht verfügbar, solange du keine einzelne quadratische Ebene ausgewählt hast und während Favvy das aktuelle Favicon-Paket erzeugt. Fahr mit der Maus über den Button, um zu sehen, warum er nicht verfügbar ist, und warte, bis die Erzeugung abgeschlossen ist, bevor du einen weiteren Export startest.

Nach einem Klick auf **Export Favicons** siehst du das Fenster **HTML code for your website's <head> tag**. Um die `.zip`-Datei aus Figma auf deinen Computer herunterzuladen, klickst du im Favvy-Plugin auf den Button **Download favicons .zip file**.

> **Tip:** **Downloads aus Figma speichern** Wenn du die **Desktop-App** von Figma nutzt, erscheint eine Aufforderung zum Herunterladen deiner Datei. Wenn du Figma dagegen im **Webbrowser** nutzt, wird deine Datei standardmäßig automatisch auf deinen Computer heruntergeladen (meist in den Ordner **Downloads**).

## Was steckt in der exportierten Favvy-ZIP-Datei? {#what-s-in-the-exported-favvy-zip-file}

Je nach den gewählten Exportformaten kann die aus Favvy exportierte `.zip`-Datei die folgenden Dateien enthalten:

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

## Weitere Exportoptionen in Favvy {#other-favvy-export-options}

Vor dem Export deiner Favicons kannst du optional den Namen deiner Website und eine Designfarbe angeben. Favvy merkt sich den Website-Namen, die Designfarbe und die Plattform-Schalter für jede Figma-Datei.

### Website-Name {#website-name}

Wenn du den Namen deiner Website in das Eingabefeld **Website Name** einträgst, wird er automatisch in die Felder `name` und `short_name` der exportierten Datei `site.webmanifest` übernommen.

Die Datei `site.webmanifest` wird für Progressive Web Apps (PWA) verwendet. Wenn dich das Thema interessiert, kannst du in den MDN Web Docs [mehr über das Web-App-Manifest lesen](https://developer.mozilla.org/en-US/docs/Web/Manifest).

### Designfarbe {#theme-colour}

Wenn du einen HEX-Farbcode in das Eingabefeld **Theme Colour** einträgst (oder den Farbwähler nutzt), wird er im erzeugten Code für dein ``-Tag automatisch in die `theme-color`-Felder übernommen und auch als Hintergrund für iOS-Startbildschirme verwendet.

### Größen und Plattformen {#sizes-platforms}

**Default (Required)** ist immer enthalten. **iOS (Icons)** und **Android (PWA Icons)** sind standardmäßig aktiviert, und du kannst sie ausschalten, wenn du sie nicht brauchst. Schalte **iOS (PWA Splash Screen)** ein, um einen iOS-Startbildschirm hinzuzufügen; dafür muss **iOS (Icons)** aktiviert sein.