Webflow Project settings icon generator for Figma

Use this Figma file to preview and export ready to use icons in Webflow Project settings.

This is the process I've gone through 100+ times...

When you're designing a new website in Webflow, you need to upload two images in different dimensions. One is used as a site favicon image, and the other as a web clip icon on your phone home screen.

A typical workflow steps:

• Go to your project files
• Find the logo
• Open vector or some other image editing software
• Tweak the image
• Export.
• Two times. Because you need 32x32px and 256x256px version.

So I've made this simple Figma file that helps you with that.

All you need to do: place your logo inside of the main logo component in Figma. You'll see an instant preview of how your icon will look like in Webflow project settings, on the phone home screen, and in a browser tab!

Now,  tweak your icon. Since it's made as a Figma component — you'll see live a preview as you tweak it — how it will look in the Project settings panel, in a browser as a favicon + on the phone screen.

When you're ready, use predefined export settings in the Figma export panel. I've added .jpg and .png file formats in 32x32px and 256x256px resolution in export settings.

Your workflow after.

• Import your logo into the Figma component
• Tweak it
• Export required files — done!

Simple as that!

Plus, you can change your browser appearance and wallpaper!

While your component instance is selected, click in the Figma Design panel and swap browser + wallpaper instance (Dark and Light versions included!).

Hope this helps and will save you some time!

P.S. Small bonus: project name and subdomain text are also editable + I've included top wallpapers from Series 1 and 2 wallpapers.

November 5. UPDATE:

This file is now available on Figma Community:
https://www.figma.com/community/file/903782092638332568/Webflow-Project-settings-icon-generator-for-Figma