Adding a favicon

Hello,

I am using the Archie theme GitHub - athul/archie: A minimal Hugo Theme as a base for my blog. I noticed that in this theme there is a config to add a favicon in the config.toml, favicon = "https://xxx.png" which I am using.

However when I looked on the web I saw people using Hugo and they implemented the favicon in a more complicated way, with different favicons for different browsers, etc.

Isn’t the way indicated in the Archie theme enough to show a favicon in every situations?

Thank you.

I let https://realfavicongenerator.net generate the icons and header code needed to support all of the platform/browser combinations. You can check your site to see what’s missing. Their FAQ section has a lot of detail.

2 Likes

Thank you.

I will add something from myself:

1 Like

Thank you for this well explained article. I am just wondering about this phrase:

These five files (1x .ico, 4x .png) plus one manifest, all saved in the root directory of our website

As I can’t put the files in the root directory (my Hugo blog is in a folder on a self-hosted server at home on a Pi and the main domain is the root directory for sthg else, https://xxxx.org/ and my blog is at https://xxxx.org/ blog/) I put them in /root directory/blog/ .

Are there any inconveniences in doing this way? Not putting the files at the root of the domain?

The described solution is universal however by design it will not work for subdirectories. Even Google recently update their document stating that favicon shall be done at root level of the domain. The subfolder rules will be ignored or replaced by what specified for main domain. Try to implement it to your domain if you can or move your blog in subdomain.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.