Your company’s logo appears in various places, from a small favicon on your website to a massive billboard on a busy highway. Your logo can be placed in multiple locations, with multiple orientations and sizes within your website. We’ll show you how to add, change and adjust the Divi logo size for distinct size orientations.
It will be much easier to integrate your logo to your website and your social media, print items, and other brand collateral. However, it will be easier to build a perfect logo if you know the different logo dimensions and sizes. Fortunately, Divi comes with several useful features for customizing the logo height. We’ll look at how to determine the optimum Divi logo size for your website in this article.
Divi logo height is an essential consideration while developing the site because the appropriate logo helps in branding, and many users remember your logo’s elegance. In this article, we will show you how to add, change the height, and use a little CSS for tablet and mobile devices for a suitable appearance. First, we discuss some common questions, and then we’ll deep dive. So let’s start!
What size should the Divi logo be?
The logo should be around 45 x 250 pixels on your website, but I recommend making it larger and using the Divi theme customizer settings to get the exact size. A dimension of approximately 95 × 450 pixels is ideal for allowing for modifications of Divi logo size. For Retina displays, the higher resolution keeps the logo sharp. The Perfect dimension of the Divi logo size is wider than its height.
In the header, portrait logos can leave too much vertical space. The finest shapes for logos are either landscape or square. However, if you have a portrait logo, you might convert it to a landscape logo. If your logo contains two words, you can arrange them side by side instead of accumulating them.
A logo with an icon on top and text on the bottom is another option. You can change the icon to the left of the text. It’s also possible to utilize just the text or just the icon, rather than both. As a result, many businesses design different logos: one that looks great in a portrait layout and can be used on stationery, business cards, and advertisements, and another that looks great in a landscape style and can be used on websites.
What size is the Divi logo?
The default Divi logo is a PNG with a resolution of 93 × 43 pixels. You can change the logo’s size in Divi’s theme customizer. However, you can’t change the raw pixel size of the logo. Therefore, the PNG files are always a good decision because they are small and have transparent backgrounds.
Divi logo size on different devices
If you customize the logo with perfect logo sizing, the logo’s Appearance on any device is excellent. The ideal logo is wider than its height with the maximum pixel. Divi theme gives enough white space in the header to avoid looking crowded. The whitespace design principles are also beneficial to logos and also for the user. We’ll show you how you can adjust the logo for different devices and upload the customized logo.
How to upload the customized logo to Divi
You first need to replace the Divi logo and update your logo when creating the new Divi site. To do so, click on the Divi Theme Options settings and submit your logo image.
- First, log in to the WordPress admin dashboard to change the logo, navigate the Divi and click on Theme Options. It will redirect to the new page, and you can upload the logo here by clicking on the Upload button.
- You can choose the image from the Media Library or browse from a local computer.
- When you select Set As Logo, the URL for your logo will be added to the chosen area.
- When you click the Remove button, your logo will be removed and replaced with the Divi logo.
How to change Divi Logo Height using theme customizer
To change the height of the Divi logo, you need to log in to the WordPress admin dashboard. Then on the left sidebar, navigate to the Divi and click on Theme Customizer.It will redirect to the new window, go to the Header & Navigation, and click on the Primary Menu bar.
Now the Divi logo height selections vary from 30 to 100 pixels in the theme customizer. In addition, the menu height varies between 30 and 300 pixels. The default logo height is 54 pixels, while the menu height is 66 pixels.
Examples
The menu and the logo are set to 30 to check the logo size is quite small. The menu height is set to the minimum in this case, but the logo is set to the maximum. It takes up the entire menu’s size(you can change the height from the Fixed Navigation Settings). It appears to be a little uneasy. Unfortunately, it’s so little in this situation that it’s barely discernible.
The header contains way too much whitespace. It would be acceptable to feature social buttons, a call to action, a patterned background, and other elements to balance the design. You can also adjust the Divi logo size for mobile by using the little icon and modify the setting whatever you want to implement.
You don’t want the text to be so prominent that it overrides the logo, or the header to have so much whitespace that everything appears lonely, or the logo to be so enormous that it seems crowded. Colors play a part in defining what seems balanced. For example, the text of the logo should be slightly larger than the text of the menu in a typical acceptable design.
The ideal logo height is determined by your menu’s height and font size. With this in mind, it’s a good idea to try with all three variables until you find something that offers you the ideal amount of whitespace and balance.
For tablet and mobile
The above approach only works on a desktop computer. However, you may modify the logo on a tablet or mobile device by utilizing this CSS snippet code. First, add the following CSS to your page.
@media (max-width: 981px) {
#logo {
max-height: 80% !important;
}
}
The maximum height percentage represents the height of your logo in the menu bar; you can adjust this amount to suit your needs.
When utilizing a very wide logo, the menu items may overlap on smaller screen sizes.
Logo size overlaps the menu.
I like to use a square or landscape logo in orientation because it fits better inside a slim header menu bar. However, suppose you have a portrait logo that you can’t change to a landscape one. In that case, you might want to try overlapping it over the bottom of the menu bar so it doesn’t get squeezed into a tiny illegible logo within the menu bar’s specified height.
@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}
How to change Favicon Logo Size
The Divi favicon is an area that appears on the top browser as an icon. Because the site will be too little for any text to be readable, you should use your icon-only logo in a small space like the favicon. If your logo is a text, you can use the first letter of the word or, if there are two or more words, a monogram version. Amazon’s one-letter logo is utilized in a variety of places, including on some of their gift cards, as shown in the example below:
P.S. The favicon is the small image that appears next to the web page title in the search bar. Standard favicon sizes are as follows:
- 16 x 16 pixels (most common)
- 32 x 32 pixels
- 48 x 48 pixels
You can change the favicon, but first, you need to log in to the WordPress admin penal dashboard. Then navigate to the Divi and click on the Theme Customizer button.
Now Goto the general settings and click on the Site Identity > Select the Icon button. After that, you can add an icon from the Library or your local computer and click on the Save button.
That’s it!
Conclusion
That concludes our discussion of how to select the optimum Divi logo size for your website. Large logos might be distracting. Therefore we recommended keeping your logo small most of the time. But, if you want to use a large logo, you’ll get greater results if you incorporate it into the web’s design, as some examples demonstrate.
Check that the logo appears excellent on both a white and a black background. Next, check your logo in the theme customizer for desktop, tablet, and phone screen sizes. Finally, play around with your header’s settings, like menu height, Divi logo height, and menu fonts, until you find a good balance that looks good.
