Where do I put my favicon with Hugo

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

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.

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.

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"

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 you like as long as you specify the path properly).

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.