To update the logo, copy your logo files to the
static/images/logo folder. You can simply overwrite the existing files.
Hugo Advance requires 4 logo variations for mobile and inverted (white) states.
static/images/logo/logo-mobile.svgMobile logo, typically the smaller icon version of your logo “the mark”
static/images/logo/logo-invert.svgDesktop logo in white, for use when the header is transparent
static/images/logo/logo-invert-mobile.svgMobile logo in white
If you want to use different filenames for your logo you can update the path to the logos in the
config.toml. You can use .png or other file extensions.
# config.toml [params] [params.logo] logo = "images/logo/logo.svg" # Desktop logo logo_mobile = "images/logo/logo-mobile.svg" # Mobile logo, typically the smaller square version of your logo (logomark) logo_invert = "images/logo/logo-invert.svg" # Desktop logo in white, for use when the header is transparent logo_invert_mobile = "images/logo/logo-invert-mobile.svg" # Mobile logo in white
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.
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