We provide extensive control of your logo, in both light and dark mode, desktop and mobile. We support both an image logo and text or both.
# _config.yml
logo:
logo_text: "Jekyll Origin"
logo_image: assets/images/logo/logo.png
logo_image_mobile: assets/images/logo/logo-mobile.png
logo_image_invert: assets/images/logo/logo-invert.png
logo_image_invert_mobile: assets/images/logo/logo-invert-mobile.png
logo_image_desktop_height: "30px"
logo_image_desktop_width: "30px"
logo_image_mobile_height: "28px"
logo_image_mobile_width: "28px"
show_logo_image_on_mobile: true
show_logo_image_on_desktop: true
show_logo_text_on_mobile: false
show_logo_text_on_desktop: true
To update the logo, copy your logo files to the assets/images/logo folder. You can simply overwrite the existing files.
There are 4 logo variations for mobile and inverted (white) states.
assets/images/logo/logo.png Desktop logoassets/images/logo/logo-mobile.png Mobile logo, typically the smaller icon version of your logo “the mark”assets/images/logo/logo-invert.png Desktop logo in white, for use when the header is transparentassets/images/logo/logo-invert-mobile.png Mobile logo in whiteIf you want to use different filenames for your logo you can update the path to the logos in the _config.yml. You can use .svg or other file extensions.
You can also use a text only logo, this is great for blogs and other personal sites that dont really have an official logo. Update the logo_text property and set show_logo_text_on_mobile: true or show_logo_text_on_desktop: true (or both!)
You can enable both image and text at the same time. And mix and match the combinations on mobile/desktop. I often like to have the image and text on desktop, and just the image (a square icon) on mobile.
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll