How to add icon to webpage tabs in blogdown
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.
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 }}">