Webflow Settings Icon Generator

About This Kit:

Created By

Tom Green

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

File Description:

Here’s a quick video overview of the main features: [https://www.youtube.com/watch?v=U6UClEdqmrU](https://www.youtube.com/watch?v=U6UClEdqmrU) 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 exporting icons. 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.