Birdhouse
A set of Photoshop, Illustrator, Sketch, Adobe Xd and Affinity Designer templates for generating useful assets for your Webflow projects.
Grab those templates and design the assets that you need to produce for every site, to deliver the most complete and fine tuned website. All templates provide well named artboards for export convenience.
The favicon is the little icon that appears in the browser's tab, in Chrome's bookmark bar, bookmark and history page. The best effect will be obtained using an icon and a transparent background. Don't use padding, take advantage of as much pixels as you can. Warning: even if Webflow will allow you to upload a SVG file, it won't work once published. Prefer using the PNG24 format.
When viewing a site on an iPhone or an Android phone, you can add a shortcut to the site on your phone's dashboard. It appears alongside all the apps you already installed. Always use a full edge to edge background for best results. Upload the image as a full square, mobile OS will take care of the round corners if they need to. Don't forget to hide the design grid before exporting, it's only there to help you with proportions. Try to make the most important part of your design to fit in the inner circle. Warning: even if Webflow will allow you to upload a SVG file, it won't work once published. Prefer using the PNG24 format.
You can customize the editor, replacing the Webflow logo by the one of your project or client. Prefer not to include a background, use transparency instead, and make use of the most pixels you can, no need to add a padding. For the best integration in the editor, make your logo monochrome using color #242424. The best format for export is PNG24.
When you decide to showcase a Webflow site in your designer's profile, you need to upload a thumbnail image. Most likely a screenshot of your site, but you can decide to enhance it with an overlay, a logo, a text.
The Open Graph image will appear along the Open Graph description when you share the URL os a site on Facebook, Twitter and numerous other social media. It should represent your site well. For example it can reflect the header of the site. You can add an icon and the url of the site on it. Use PNG for export.
The link to the Figma template is a sharing link that should open right in your figma account. You now have access to the template as a viewer only.
Duplicate the template in your own Draft area, and rename it to match your Webflow project name.
Avoid making duplicates in your own space — unless you have modified the original template — as I'm likely to update the original file regularly. When you start a project, it's better to come back here and click the Open in Figma button again.
The icon used is a Component. If you modify the source, all instances will change too.
The red background color is a Local Style. You can also edit it and see the color change everywhere.
The bigger objects are Figma Frames, and they are defined for 1× PNG export.
The default icon is defined as a Symbol. You can edit any of the occurences of the Symbol (e.g. replace it with your own while you're editing it) and it will update in every artboard.
The default icon color is white. When it's not, the color is defined as a Fill in the Appearance panel, so you can just edit the color there without breaking the sync with the Symbol source.
Icon colors and background colors are defined as global colors from the Swatch panel. You can change the Red color and the Dark color from the Swatches panel by double clicking on them. The changes you make will reflect on all objects.
Export using cmd+alt+E (or ctrl+alt+E on Windows) to export all Artboards at once. You can export in PNG and SVG at the same time. However don't use SVG versions for Favicon and Webclip.
Using the same command, you can chose to export Assets if you've defined them before in the Assets panel. However Assets don't stay in sync with your changes.
%20%202020-10-08%2015-49-00.png)
%20%202020-10-09%2010-47-06.png)