HEY

Participate in the next Webflow Challenge!

Favicon and Webclip with Figma for Webflow

Have you ever had the opportunity to add a favicon and webclip on Webflow? No ? I'll show it to you in this article!

Updated on

12/6/2020

add favicon and webclip on webflow
Photo by Dids de Pexels

On which software do you create the favicons and webclips of the websites you take care of? Actually, there are a lot of software and online platforms, but I, personally, am used to using Figma. The real question is: "how to add a favicon and webclip on Webflow?

Why add a favicon and webclip on webflow?

You must absolutely change the favicon and webclip of your site if you based yourself on existing site templates (as we are used to do with Webflow; by the way, this is one of the things that makes Webflow great, not to mention the fact that thanks to it, you can create a site without any code). Let's suppose you were inspired by the pre-existing templates in the showcase. You probably copied the favicon and webclip of the model himself. However, these elements are not adapted to your site or your visual identity.

Moreover, I remind you that by definition, the favicon is none other than the icon displayed in the favorites bar of an internet browser. It is mainly used by Internet users, because it helps them to quickly identify your site. We can therefore say that it should be part of a company's graphic charter.

The same goes for the webclip (which only differs by being a little bit bigger in size).

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

add favicon and webclip on webflow
Photo by Chandrakanth Elancheran de Pexels

Prepare your favicon and webclip

To add a favicon and webclip on Webflow, you just have to go to the software you chose (me, on Figma), and you create your own favicon and webclip. You design them as you want. In most cases, we use company logos. But as far as the favicon in particular is concerned, I doubt it's a good idea (in case the logo is not visible enough as a favicon).

So there are those who opt for initials. For HappyDesk for example, if the logo was not visible enough, I might have used the initial H.

add favicon and webclip on webflow
Photo of Engin Akyurt de Pexels

Anyway, I'll let you see how I did it in my video.

Before adding a favicon and webclip on Webflow, please note these dimensions:

  • Favicon 32 x 32 px
  • Webclip 256 x 256 px

Once this is done, all that's left to do is to export these two images (preferably on PNG files).

Insertion of favicon and webclip on Webflow

Then go to the parameter, and then add a favicon and webclip in the appropriate fields. To validate all these modifications, you just have to publish the site. Your favicon and webclip are up to date.

add favicon and webclip on webflow
Photo by Kaboompics .com from Pexels

Conclusion
Now that you are aware of the importance of favicons and webclips, and that you know how to easily modify those of the sites designed with Webflow, wouldn't you be tempted to register on Webflow (if you haven't already)? If you're already there, it's high time to update all your sites :)

YouTube: How to add Favicon and Webclip to Webflow

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training