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.

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?

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

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

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 na MDN Web Docs.

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 <head></head>.

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.