Logo

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.

# _data/site.yml

logo:
  logo_text: "11ty 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: "132px"
  logo_image_mobile_height: "30px"
  logo_image_mobile_width: "34px"
  show_logo_image_on_mobile: true
  show_logo_image_on_desktop: true
  show_logo_text_on_mobile: false
  show_logo_text_on_desktop: false

Image Logo

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 logo
• assets/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 transparent
• assets/images/logo/logo-invert-mobile.png Mobile logo in white

If you want to use different filenames for your logo you can update the path to the logos in the _data/site.yml. You can use .svg or other file extensions.

Text Logo

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!)

Image & Text

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.