Logo

Adding Your Logo

To update the logo, copy your logo files to the themes/hugo-shard/static/images/ folder. You can simply overwrite the existing files.

Hugo Shard requires 4 logo variations for mobile and inverted (white) states.

• images/logo.svg Desktop logo
• images/logo-mobile.svg Mobile logo, typically the smaller icon version of your logo “the mark”
• images/logo-invert.svg Desktop logo in white, for use when the header is transparent
• images/logo-invert-mobile.svg Mobile logo in white

Logo Sizing

Desktop Logo The desktop logo is resized to a height of 23px with an automatic width. So common size logos that are square or rectangle (horizontal) should work well.

Mobile Logo The mobile logo is resized to a height of 30px with an automatic width. It’s recommended to use a square (icon) logo for mobile.

Resizing Logos

We’ve tried to support the most common logo sizes, but depending on your logo dimensions it may not fit neatly into the header. You can directly edit the height and width of the logos in the /layouts/partials/logo.html partial.