Add a favicon to the Hugo website

Posted on Jul 4, 2024

Go to https://favicon.io/ and create a favicon. Download a zip archive, unzip and add the files to the static directory.

Add the following snippet to the layouts/partials/head/custom.html file.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Note: don’t forget to remove file metadata if necessary. For more information, see this post: Manipulating, deleting metadata files.

Deploy.

git add . 
git commit -m "Added favicon"
git push