Participate in the next Webflow Challenge!

How to add a logo on Webflow?

The logo first appeared in the 19th century. Since then, it has become a must-have! All this to say that you absolutely have to add a logo on webflow.

Updated on


add a logo on webflow
Photo by Chuttersnap on Unsplash

Do you know that? The logo first appeared in the 19th century. Since then, it has become unavoidable! When it comes to creating a brand or taking care of its image, the logo never leaves us. All this to say that you absolutely have to add a logo on webflow. But how do you do it?

Tips for adding a logo on Webfow

As usual, we will start with a little exercise. So create a new page, and insert a few elements in the prefabricated Webflow layout; don't forget the navigation menu, first of all.

You will see that on this menu, we have reserved a space dedicated to the logo, on the left. You click on it. A small window appears, and there you see a button: add image. All that's left to do is add the logo in question (i.e. import it). Usually, it is done in png, svg or jpeg format.

However, there's a small caveat: the size of the logo is a problem on small devices. So how do you add a logo on Webflow tablet and smartphone? That's the question.

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"

adapt logo to the screen
Photo by Donatella D'anniballe on Unsplash

How to adapt the size of the logo to any type of screen?

Now that you've managed to add a logo to Webflow, do you notice that when you click on the image, some features appear? They will allow you to modify the characteristics of the logo.

For example, you can change the size of the logo. Once this is changed, it will remain the same for all the different screen sizes. Unless you specify specific dimensions for tablets and smartphones.

To do this, you go to the bar at the top of your screen. Click on the "smartphone" icon to get an overview of the site on your mobile phone (also for the tablet). When you are in these windows, you can change the size of the images. It will be specific for each screen.

Are there other reasons to add a logo on webflow?

The logo is purely and simply the heart of a brand's image. This graphic will help people identify a company and even differentiate it from another. Especially since nowadays there are so many companies and startups offering the same services. Might as well stand out with a logo, right?

The logo is also the one that will encourage your prospects to want to get to know you better. Indeed, humans are by nature interested in designs, colors, images... And this theory is proven.

So, if your logo is attractive enough, they won't hesitate a single second to browse a little longer on your site (just to get to know it better). At first, it's out of curiosity, but as they browse, who knows if they might not want to use your services? You never know.

add a logo on webflow
Photo by Alfons Morales on Unsplash

To be able to add a logo on webflow, you still need to have one. So, how do you create an effective logo?

How to create a logo for your website?

First, your logo must be consistent with your site. I'm talking about color, typography... On the other hand, it should also be the same on your social networks.

Simplicity should also be the watchword when designing a logo. Customers and prospects should be able to remember it easily. Among several logos, they will be able to recognize yours quickly! Do you remember the Apple and Facebook logos? Simple, but effective!

You'll also have to think about his flexibility. Regardless of the size of the screen on which you view the logo, will it be visible enough? Also, is it suitable for different surfaces: business card, t-shirt...

Finally, timelessness is very important. Even after a few months or even years, your logo should not be "out of fashion". So, when designing the logo, make sure it's classic.

design a logo
Photo by Kazuend DHk on Unsplash

If you have a logo, but it doesn't appear on your site yet, it's time to integrate it. As you've seen throughout this article, this is done in just a few clicks! In case you don't have a logo yet, you know what you have to do.

YouTube: How to add your LOGO on Webflow? 2020

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


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