Zaznaczona warstwa musi mieć kwadratowe proporcje, czyli identyczną szerokość i wysokość (na przykład 512x512 pikseli). Favvy poinformuje Cię, jeśli zaznaczysz warstwę, która nie jest kwadratowa.

Przycisk Export Favicons jest niedostępny, dopóki nie zaznaczysz jednej kwadratowej warstwy, a także w trakcie generowania bieżącego pakietu faviconów. Najedź na przycisk, aby zobaczyć, dlaczego jest niedostępny, i przed rozpoczęciem kolejnego eksportu poczekaj na zakończenie generowania.

Po kliknięciu przycisku Export Favicons zobaczysz okno HTML code for your website's <head> tag. Aby pobrać plik .zip z Figmy na komputer, kliknij przycisk Download favicons .zip file we wtyczce Favvy.

Zapisywanie pobranych plików z Figmy. Jeśli korzystasz z aplikacji desktopowej Figma, pojawi się okno pobierania pliku. Jeśli jednak używasz Figmy w przeglądarce internetowej, plik zostanie domyślnie automatycznie pobrany na komputer (zwykle do folderu Downloads / Pobrane).

Co zawiera plik .zip wyeksportowany z Favvy?

W zależności od wybranych formatów eksportu wyeksportowany z Favvy plik .zip może zawierać następujące pliki:

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

Inne opcje eksportu w Favvy

Przed eksportem faviconów możesz opcjonalnie podać nazwę strony i kolor motywu. Favvy zapamiętuje nazwę strony, kolor motywu i przełączniki platform osobno dla każdego pliku Figmy.

Nazwa strony

Wpisanie nazwy strony w polu Website Name automatycznie doda ją do pól name i short_name w wyeksportowanym pliku site.webmanifest.

Plik site.webmanifest jest używany w progresywnych aplikacjach webowych (PWA). Jeśli Cię to interesuje, możesz przeczytać więcej o manifeście aplikacji webowej w dokumentacji MDN.

Kolor motywu

Wpisanie w polu Theme Colour kodu koloru HEX (lub użycie próbnika kolorów) automatycznie doda go do pól theme-color w kodzie wygenerowanym dla znacznika <head></head>, a także użyje go jako tła ekranów startowych iOS.

Rozmiary i platformy

Default (Required) jest zawsze uwzględniany. iOS (Icons) i Android (PWA Icons) są domyślnie włączone i możesz je wyłączyć, jeśli ich nie potrzebujesz. Włącz iOS (PWA Splash Screen), aby dodać ekran startowy iOS – wymaga to włączenia iOS (Icons).