Free forever, no sign-up - get your full favicon set now
All platforms

Favicon for Hugo

How to add a favicon in Hugo

To add a favicon in Hugo, place your icon files in the static folder (Hugo copies it to the published root) and add the <link> tags via a head partial - typically layouts/partials/head.html or a custom head-end partial your theme includes. Reference paths absolutely from the site root, respecting your baseURL.

What you need

  • favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
  • The static folder at your project root, copied verbatim to the published site root.
  • A head partial your theme renders (layouts/partials/head.html, or a head-end hook) to hold the link tags.

Step-by-step: add a favicon in Hugo

  1. Generate the icon set. Use Logo2Favicon to create favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - in your browser, nothing uploaded.
  2. Add files to static/. Copy favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest into the static folder. Hugo copies static/ to the published root, so they resolve at /.
  3. Add link tags to a head partial. Edit layouts/partials/head.html (override the theme's by copying it into your site's layouts/partials/) and add the icon, apple-touch-icon, and manifest link tags. Use absolute or relURL/absURL paths.
  4. Build and verify. Run hugo (or hugo server), then check the tab icon and that /favicon.ico and /site.webmanifest return 200 under your baseURL.
Add inside layouts/partials/head.html (override the theme partial):
<link rel="icon" href="{{ "/favicon.ico" | relURL }}" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/favicon-32x32.png" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/apple-touch-icon.png" | relURL }}">
<link rel="manifest" href="{{ "/site.webmanifest" | relURL }}">

Common mistakes to avoid

  • Putting icons in assets/ instead of static/ - assets/ is for Hugo Pipes processing, while static/ is copied to the root as-is.
  • Editing the theme's partial inside themes/ directly instead of overriding it in your own layouts/partials/, so theme updates wipe your change.
  • Hard-coding absolute paths that ignore baseURL on a subpath deploy; pipe through relURL or absURL instead.
  • Adding tags to a single template rather than the shared head partial, so only some pages get the favicon.
Free forever, no sign-up

Generate a complete icon set for Hugo

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Hugo. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a Hugo site?
In the static folder. Hugo copies static/ to the published site root unchanged, so static/favicon.ico becomes /favicon.ico. Add the link tags via a head partial like layouts/partials/head.html.
Which Hugo file holds the favicon link tags?
A head partial that your theme includes - commonly layouts/partials/head.html, or a custom head-end partial. Override the theme's copy by placing your own version in your site's layouts/partials/ so updates do not overwrite it.
Why doesn't my Hugo favicon work on a subpath deploy?
A bare /favicon.ico ignores a non-root baseURL. Pipe the path through relURL or absURL (for example { "/favicon.ico" | relURL }) so Hugo resolves it under your configured baseURL.
Do favicon files go in static/ or assets/ in Hugo?
Use static/. The assets/ folder is for files processed by Hugo Pipes (fingerprinting, bundling), whereas static/ is copied to the root verbatim, which is what a root favicon needs.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.