# Using Favvy
# Selecting a frame to export
After running the Favvy Figma plugin, you'll be asked to select a single square layer (eg. 512x512) to use as your image to export as a favicon package.
Your selected layer must be a square
Favvy will let you know if you've selected a layer that isn't square; this can be resolved by resizing your frame until the width and height are identical (eg. 512x512).
Find the layer in your Figma file that you would like to export and click on the layer in our Figma file; once the layer has been clicked, Favvy will automatically show a preview of your selected layer in the plugin window.
# Generating your favicons
After you've successfully selected the layer you would like to use for your favicons, simply click the Export Favicons button in the Favvy plugin to generate production ready code and a favicon .zip file from your layer. This process should only take about 1 second to complete.
# Adding metadata and theme colour
Before exporting your favicons, you can optionally specify your website name and a theme colour.
# Website name
Populating the Website Name input field with your website name will automatically add it to the name and short_name fields in the exported site.webmanifest file.
The site.webmanifest file is used in progressive web apps (PWA), and if you're interested, you can read more about the web app manifest (opens new window) on the MDN web docs.
# Theme colour
Populating the Theme Colour input field with a HEX colour code will automatically add it to the browserconfig.xml file exported by Favvy, and also use it for the theme-color fields in the generated code for your <head> tag.
# Downloading your favicons
After clicking the Export Favicons button, you'll see a confirmation screen letting you know that your favicons are ready to download. To download the .zip file from Figma to your computer, you can click the Download favicons .zip file button in the Favvy plugin.
File downloads from Figma
If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).
# What's inside the .zip file?
Depending on the export formats you select, the full list of possible files included in the exported .zip file from Favvy are listed below:
android-chrome-192x192.pngandroid-chrome-512x512.pngapple-touch-icon.pngbrowserconfig.xmlfavicon.icofavicon.svghead.htmlsite.webmanifest
# Copying the generated HTML code
On the confirmation screen, you will also be presented with HTML code that you can use in your website's <head> tag. letting you know that your favicons are ready to download. This easiest way to copy this block of code is to click the Copy HTML to clipboard button in the Favvy plugin.
Once you've copied the HTML, you'll be able to open up a code editor and paste the HTML into your <head> tag. Please sure that the paths to your icons are updated as needed, depending on where they're located in your directory structure and/or on your server.
Finding this code after closing the Favvy plugin
Don't worry if you forgot to copy this code from Favvy; if you need to refer back to it later, there is a file in the exported .zip file called head.html, which includes the same code that is shown in the Favvy confirmation screen.