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
- 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 libraryView in Library
We charged your card and sent you a receipt
You'll need an account to access this in our app. Please create a password to continue.
Download from the App Store or text yourself a link to the app
Even though this is an automated mail.. I wanted to say thanks.
Thank you for trying out this product, hope it serves you well.
Good news! Since you already have a Gumroad account, it's also been added to your library.