Hugo reads its configuration from hugo.yaml (or files in the config directory) in the root of the Hugo site project to configure all aspects of the site and theme-related options. Check out the config file for this site hugo.yaml to get a comprehensive idea of available settings and best practices.

Title

To modify the title of the site, edit hugo.yaml (or config/_default/hugo.yaml) and add the title of the site.

title: My awesome site

Description, keywords and authors

To modify the description, keywords and authors of the site, edit hugo.yaml (or config/_default/params.yaml) and add the description, keywords and authors of the site.

params:
  description: The description of my awesome site
  keywords:
    - Awesome
    - Beautiful
    - Magic
  authors: John Doe

For multi-lingual sites, the description can be localized in hugo.yaml (or config/_default/languages.yaml):

es:
  languageName: Español
  params:
    subtitle: La descripción de mi fantástico sitio web

Logo

To modify the logo in the top header, edit hugo.yaml (or config/_default/params.yaml) and add the path of the logo file under static directory.

params:
  logo: images/logo.svg

Favicon

To modify the favicon of the site, place the icon files under the static directory.

• static
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • favicon.svg

Include at least favicon.svg in the static folder. This will be used as the default favicon.

To create an adaptive SVG favicon that responds to system theme preferences by using CSS media queries within the SVG itself, follow the approach described in Building an Adaptive Favicon.

While favicon.ico is generally for older browsers, modern browsers support SVG favicons which are preferred for their scalability and small file size. Use tools like favicon.io or favycon to generate additional favicon formats if needed.

Theme Configuration

Use the defaultChroma setting to configure the default chroma mode of the theme, allowing visitors to switch between light or dark mode.

params:
  defaultChroma: # light | dark | auto

Options for defaultChroma:

• light - always use light mode
• dark - always use dark mode
• auto - sync with the operating system setting (default)