How does the logo size work

The size of the logo depends on three factors:

1. The maximum width is set in the “Logo width” option:

The logo cannot be wider than the value set in “Logo width.”

2. The height of the row where the logo is placed:

The logo cannot be taller than the header row in which it is located.

3. The dimensions of the logo image and its aspect ratio.

The logo cannot exceed its physical dimensions.

It cannot be stretched or distorted, its aspect ratio must always be maintained across all screen widths and header states (regular, sticky, mobile).

Additional details:

The “Logo width” option only sets the maximum width of the logo.

For example, if the physical image size is 369px, this option can define a size between 10px and 369px.

Any value above 369px will not work because it would require increasing the actual image size in an image editor.

What happens if the row height is smaller than the logo’s physical dimensions?

If the row’s height is less than the logo’s physical size (on desktop or mobile), the logo will be scaled down while maintaining its aspect ratio.

Add width and height attributes option

The “Add width and height attributes” option in the settings of the Logo element allows you to remove the “Images no explicit width and height” issue from the Google Speed Insights.