← Back to Favvy Video Tutorials

What this video covers

This video shows how to use the Favvy Figma plugin to export favicons directly from a Figma selection. It demonstrates installing the plugin, previewing multiple favicon sizes, exporting a zip with generated icon files and HTML, and adding those files to a website so the favicon updates in the browser.

Things you'll need

• Figma
• The Favvy Figma plugin installed

Steps

1. Install Favvy from Figma by opening the Figma logo menu, going to Plugins, then Browse all plugins, searching for "Favvy", and clicking Install.
2. Open the plugin from a Figma layer by right-clicking, choosing Plugins, and selecting "Favvy Favicon Exporter".
3. Select a single square layer or frame, then optionally enter a website name and theme color to preview how the favicon will look at sizes like 16 by 16, 32 by 32, 64 by 64, and 150 by 150.
4. Click "Export Favicons" to generate a zip file of favicon assets, and use "Copy HTML" to copy the generated head HTML to the clipboard.
5. Unzip the exported files and place them in the root of your website project, then paste the copied HTML into the head tag of your index.html or use the included head.html file.
6. Reload the website to confirm the favicon appears, and repeat the export with a new frame, background, or color when you want to update the icon.
7. Replace the existing favicon files with the newly exported ones when iterating on the design, since the filenames stay the same.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Exporting your Figma frame to favicons
• Next: Add the generated favicon code to your website
• Open Favvy in the Figma Community