Le calque sélectionné doit être carré, c’est-à-dire avoir une largeur et une hauteur identiques (par exemple 512x512 pixels). Favvy vous prévient si le calque sélectionné n’est pas carré.

Le bouton Export Favicons reste indisponible tant que vous n’avez pas sélectionné un seul calque carré, ainsi que pendant que Favvy génère le pack de favicons en cours. Survolez le bouton pour savoir pourquoi il est indisponible, et attendez la fin de la génération avant de lancer un autre export.

Après avoir cliqué sur le bouton Export Favicons, la fenêtre HTML code for your website's <head> tag s’affiche. Pour télécharger le fichier .zip de Figma sur votre ordinateur, cliquez sur le bouton Download favicons .zip file dans le plugin Favvy.

Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).

Que contient le fichier .zip exporté par Favvy ?

Selon les formats d’export choisis, voici la liste complète des fichiers que peut contenir le fichier .zip exporté par Favvy :

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

Autres options d’export de Favvy

Avant d’exporter vos favicons, vous pouvez indiquer le nom de votre site web et une couleur de thème. Favvy mémorise le nom du site, la couleur de thème et les options de plateformes pour chaque fichier Figma.

Nom du site web

Si vous saisissez le nom de votre site web dans le champ Website Name, il est automatiquement ajouté aux champs name et short_name du fichier site.webmanifest exporté.

Le fichier site.webmanifest est utilisé par les applications web progressives (PWA). Pour en savoir plus, consultez la page sur le manifeste d’application web des MDN Web Docs.

Couleur de thème

Si vous saisissez un code couleur HEX dans le champ Theme Colour (ou utilisez le sélecteur de couleur), il est automatiquement ajouté aux champs theme-color du code généré pour votre balise <head></head>, et utilisé comme fond des éventuels écrans de démarrage iOS.

Tailles et plateformes

Default (Required) est toujours inclus. iOS (Icons) et Android (PWA Icons) sont activés par défaut, et vous pouvez les désactiver si vous n’en avez pas besoin. Activez iOS (PWA Splash Screen) pour ajouter un écran de démarrage iOS ; cette option nécessite que iOS (Icons) soit activé.