10

How can I add a favicon to by blogdown website? I am using the minimal theme. I tried adding the line in the config.toml favicon = imgPath and I also attemped to move 'favicon.ico' to the static folder, but neither has worked.

7
  • 1
    @yihui-xie These points are yours: all I know about Hugo come from your bookdown!
    – RLesur
    Feb 1, 2018 at 0:50
  • 1
    @romles It requires effort to read the book, and type out an answer :) Not many people do both things.
    – Yihui Xie
    Feb 1, 2018 at 3:09
  • @troh how did you accomplish to add favicon.ico to your minimal website? In which directory should I put my favicon.ico file? Thank you
    – patL
    Aug 1, 2018 at 20:13
  • @patL please see below
    – troh
    Aug 1, 2018 at 20:16
  • @troh I've tried each step above and I couldn't make it work... thank you anyway.
    – patL
    Aug 1, 2018 at 20:41

2 Answers 2

15
+500

If you have a file named favicon.ico in root directory, most browsers will use it. The easiest way is to add favicon.ico in static directory (therefore, Hugo will copy it to root directory), see here.

Favicon is declared in <head> element. In minimal theme, the <head> element is defined in header.html file.
As you can see, the minimal theme does not provide support for favicon.

First, check if you have a layouts/partials/header.html file.
If this file does not exist, copy themes/minimal/layouts/partials/header.html file to layouts/partials directory (you may have to create this directory).

You have to modify the layouts/partials/header.html file.
Add after opening <head> tag:

<link rel="icon" type="image/png" href="{{ "imgPath" | relURL }}">
2
  • 1
    The favicon.ico in the root directory worked. I wasn't able to get the second solution to work. Thanks!
    – troh
    Jan 31, 2018 at 1:03
  • maybe you can try <link rel="icon" type="image/png" href="{{ .Site.BaseURL }}/imgPath">
    – RLesur
    Feb 1, 2018 at 0:56
2

If you are using other themes such as Academic, you might have to create an icon instead of a favicon.ico file. As per instructions here, you have to create a square 512x512 pixel image named icon.png and place the image in your root assets/images/ folder. For the Academic theme, the assets folder is located under themes\hugo-academic when using RStudio.

So be careful if you have a Hugo theme that does not support simply pasting the favicon.ico file in the root of the static folder.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.