Where do I put my favicon with Hugo

Question

I am using Hugo to generate a static site. Where should I put my favicon.ico file?

Haiku

Answer 1

Put the favicon inside of the static directory. The static directory sits in the root of your hugo site. When you generate your site, the favicon will be copied into public, the root of the generated site.

Haiku

Depends on baseURL settings and other settings. Does not always work like this. – Flieger

Is the favicon visible when starting locally with hugo server? – Shrike

@mathtick can you elaborate a bit more? Also does it have to be in .ico format? or it can be .jpg as well or some other image format? – Steinberg

This was a long time ago, but I see this in my old repo <link rel="icon" href="<%= BASE_URL %>favicon.ico"> – Flieger

If the "static" directory is outside of "themes", the favicon will only show on the root page. The better approach is to find the "static" directory within themes and modify that. – Dibromide

Answer 2

Putting your favicons in static folder is right. It will be published to public folder once the page is built.

However, using absolute CDN (e.g.: Dropbox) services could be better for page performance.

Catcher

I'm not sure Dropbox is intended to be used as a CDN – Subito

Answer 3

When you use this code in your head:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

... you can put your single icon-192x192.png in the 'img' folder in the static directory (or at any other place in the static folder, as long as you specify the path properly).

Pro

Answer 4

Just ran into this and discovered @mathtick's comment of "it depends" was the most accurate answer here, so I decided to make this post.

The answer seems to depend on what theme you're using, I've tried to genericize my explanation to make it still useful for others to figure out how to make it work in their scenario, even if it's not exactly the same as mine.

This is what worked for me when I created a proof of concept site using Hugo with the docsy theme:

Identify your 3 most valuable resources:
1. Your Theme's Example Site's Git Repo:
Example:
https://github.com/google/docsy-example

2. Your Theme's Git Repo:
Example:
https://github.com/google/docsy

3. Your Theme's docs page:
Example:
https://www.docsy.dev/docs/

Here's the logical workflow I went through to get it to work:

1. Heard people say look in the /static/ folder. I looked at the docsy-example site and saw that it didn't have a folder named static. (my code base had an empty /static/ folder created by the hugo cli's init logic.)
2. That's when I remembered there's a parent inheritance relationship when it comes to themes, since docsy-example doesn't have a /static/ folder, it must be using the /static/ folder of it's parent, the docsy theme repo.
   https://github.com/google/docsy/tree/main/static/favicons
3. Then I created /static/favicons/ in my code base
   https://myrepo.com/my_hugo_site_that_uses_docsy_theme/static/favicons
   With the realization that if I create files in this folder that match the names of files in the docsy theme's corresponding /static/favicons/ folder, my copy of the folder will merge with the theme's copy of the folder, and my copy will override the theme's copy.
4. Then I was like crap there's like 15 files here, so I RTFM'ed and found this page:
   https://www.docsy.dev/docs/adding-content/iconsimages/#add-your-favicons
   Which had a tip on how to use http://cthedot.de/icongen to generate those files.

Then I discovered something not written in the docs while testing using Hugo's localhost development fast feedback loop and QA'ing that the change had the desired effect. If you update the favicon, sometimes using incognito mode alone is insufficient to reflect the updated change. I had to download a spare browser, and use incognito mode of it, to successfully see the change occured. Then in my normal browser I had to clear cache / cookies, fully quit all browser processes and reopen the browser, and then use incognitio mode to get the change to reflect correctly in the browser I normallly use.

Dislimn

Answer 5

Static files (like logo image or favicon) goes to the "static" folder If you are using:

• a downloaded template, put it in /static/* of your hugo project (to avoid getting erased when updating it)
• your own tempalte, put it in /themes/themeName/static/*

Both will be accessible with path like: /*

Example : "/static/ico/myico.ico" and "/themes/themeName/static/ico/myico.ico" will be bot accessible by "/ico/myico.ico"

Sepoy

Answer 6

The most highly voted solution only works for the root page: the favicon won't appear on any of the URLs for your blog posts.

For adding a favicon across the site:

First, locate the "static" directory within your "themes". In my case, it was in within "themes/hugo-xterm".

Second, add the file inside the "static" directory.

Third, modify the equivalent of "themes/hugo-xterm/layouts/partials/head/base.html" by adding,

<link rel="icon" href="{{ "my-icon.png" | absURL }}" sizes="32x32" type="image/png">

Fourth, add the following lines to the end of the "config.toml" or equivalent.

[params]
  favicon="my-icon.png"

The favicon will then appear on every page. Cf. this Hugo website.

And this commit

Dibromide