Edit product

$0+

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 bouns: project name and subdomain text are also editable + I've included top wallpapers from Series 1 and 2 wallpapers.

You've purchased this product

See it in your library

View in Library
Sorry, this item is not available in your location.
Sold out, please go back and pick another option.

Name a fair price:

0 ratings

  • FiletypeFigma .fig
  • Size8.1 MB

Checkout

Webflow Project settings icon generator for Figma

Enter your info to complete your purchase

Card

···· ···· ···· 4242
Test card

05/18

Card

Use a different card?

Card

pp paypal

or pay with

We do not keep any of your sensitive credit card information on file with us unless you ask us to after this purchase is complete.

or pay with

Your purchase was successful!

We charged your card and sent you a receipt

    Gumroad Library

    Download from the App Store or text yourself a link to the app

    Thanks! 👋

    Even though this is an automated mail.. I wanted to say thanks.

    Thank you for trying out this product, hope it serves you well.

    Enjoy!

    Tom

    Good news! Since you already have a Gumroad account, it's also been added to your library.

    Powered by Gumroad