Streaming live at 10am (PST)

Navbar logo size

Hey guys,

Quick question here on best practice.

How big should a logo image be for a navbar, and what format works best? I assumed an SVG might be best so that it scales if necessary? Failing that would using a high resolution version that gets scaled down (if possible) be better or worse than using a low resolution version that’s the exact size that it needs to be (page load times notwithstanding).

Many thanks,


For logos, it’s always best to make them with the high possible resolution. I make all mine on a canvas of 4000x2000, with a DPI of 4000, as an SVG or PNG.

It’s best because scling down gives a really nice, crisp vector. With this high DPI, you can always reduce size of the vector to fit in space you need. Header, Faded Background, etc.

In the header, there’s no set size. Some like larger, but I suggest you add it within a div. Restrict the div’s size and add the vector, then simply resize the div to fit your liking.

Use a link block for vector you add.

1 Like

80 x 80 px. That’s my go-to for inner pages and sometimes even home. It can be wider but most often stays at height 80 max.

For a logo that’s going to be used all over the site you want it to be pixel perfect. So no resize. You design at @1x, so 80 x 80 pt, or px. And you make sure all your points and lines are in the grid, work with a grid that’s not centered (in AI for example) and pixel preview often to be sure noting is bleeding.

When it’s that size and pixel perfect, there’s no real difference if you use PNG or SVG. Visually the same and even in PNG it’s not going to be much bigger than the SVG. If you’re using SVG and text in the SVG (like a letter), outline your text before importing.

Here’s a link to great resources about screen design and pixel perfect:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.