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.

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?

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

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

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.

Designfarbe

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 <head></head>-Tag automatisch in die theme-color-Felder übernommen und auch als Hintergrund für iOS-Startbildschirme verwendet.

Größen und Plattformen

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.