Webflow Project settings icon generator for Figma

Hey Webflow community! My first post here :slight_smile:

I’ve made a Figma file that helps you with exporting 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.

https://static-2.gumroad.com/res/gumroad/files/9299334570749/d23b2c4e71274cc7a95aef8dd82c26a1/original/Browser.png

Typical workflow:

  • 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 can help with that.

https://static-2.gumroad.com/res/gumroad/files/9299334570749/2caf72dbdbbf424aae336d90b926d330/original/Screenshot%202020-10-07%20at%2023.01.20.png

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 :dizzy: as you tweak it — how it will look in the Project settings panel, in a browser as a favicon + on the phone screen.

https://static-2.gumroad.com/res/gumroad/files/9299334570749/34360ba277434bf2b4a74544fa33f1e6/original/Screenshot%202020-10-07%20at%2023.02.54.png

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 browser versions included!).

Hope this helps and will save you some time!

P.S. Small bouns:
Project name and subdomain text are also editable + I’ve included top wallpapers from Series 1 and 2 wallpapers.

Grab it here for free:

Hope it helps!

New update:

I’ve made a quick overview YouTube video:

and just published the file for free on Figma cummunity:

Hop you’ll find it useful!