Adding Logo - ExampleSite

Add your logo

Put your logo image into your site’s assets/ directory, and add filename to your hugo.toml’s [params] section.

# hugo.toml
[params]
logo = "example-logo.png"

Of cource, you can add language-specific logo images by adding logo in language’s params section.

# hugo.toml
[languages]
  [languages.en]
    locale = "en"
    label = "English"
    title = "ExampleSite"
    [languages.en.params]
      logo = "example-logo.png" # add your logo here.

Auto generating icons from logo

It will auto generate the following icons from logo:

32x32 png
16x16 png
180x180 apple-touch-icon png

<!-- head-icon.html -->
{{- with $logo.Process "resize 180x png" -}}
    <link rel="apple-touch-icon" sizes="180x180" href="{{ .RelPermalink }}">
{{- end -}}
{{- with $logo.Process "resize 32x png" -}}
    <link rel="icon" type="image/png" sizes="32x32" href="{{ .RelPermalink }}" />
{{- end -}}
{{- with $logo.Process "resize 16x png" -}}
    <link rel="icon" type="image/png" sizes="16x16" href="{{ .RelPermalink }}" />
{{- end -}}

site.webmanifest

If site.webmanifest exists in assets dir, the following link tag is added.

<!-- head-icon.html -->
{{- with resources.Get "site.webmanifest" -}}
    <link rel="manifest" href="{{ .RelPermalink }}" />
{{- end -}}

favicon.ico

If favicon.ico exists in assets dir, the following link tag is added.

<!-- head-icon.html -->
{{- with resources.Get "favicon.ico" -}}
    <link rel="shortcut icon" href="{{ .RelPermalink }}" type="image/x-icon" />
{{- end -}}