Change Favicon
I wanted to change the little icon that shows up in the browser tab for my site, and this is how I did it. First, I needed to learn what it was called, so I googled: “what is the icon on a browser tab called” and Google said “favicon.” Then I started googling things like “how to change favicon in Hugo,” and realized that’s not exactly what I wanted; once I add Hugo to the search term, I get lots of long form tutorials about building a site in Hugo, and I don’t need that right now. I realized I have two questions:
- How do browsers decide what favicon to show for a site?
- How do I get Hugo to use this feature for me?
I think I’ll learn more if I answer the first one, in general, on its own, and then start trying to make my site do what I want. (This is a special case of the advice, “Learn the basics and see if that helps” from Julia Evans).
It turns out that one of the rel values that can be put in the link element of HTML is
“icon”. The HTML I’m looking
for is:
<link rel="icon" href="/path/to/some/image">
(There’s some more discussion about link tags on MDN that is pretty interesting reading.)
Great! Now I know what I’m trying to tell Hugo to do. Next, let’s tell Hugo to do it. I need hugo to:
- Put the above HTML snippet in the
<head>bit of the HTML - Serve an appropriate image at some path
My theme (which was also just created from hugo new) has a file at ./themes/firstTheme/layouts/partials/head.html
(yes, my theme is called “firstTheme” because
naming things is hard). There’s HTML for the <head> in
there.
I also need the image I want to use. I found a free online generator, which has some adds but seems to work. So here’s the icon!
Now I need to make some changes to the partial view:
diff --git a/themes/firstTheme/layouts/partials/head.html b/themes/firstTheme/layouts/partials/head.html
index 89274c0..f196e76 100644
--- a/themes/firstTheme/layouts/partials/head.html
+++ b/themes/firstTheme/layouts/partials/head.html
@@ -1,6 +1,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" href="/images/favicon.ico"/>
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title>
And I think I’m done!
Honestly, this took a bit longer than I thought it would, and I think see some evidence in the MDN docs that I’ll need to do more if I want different files to show up on mobile or whatever, but that’s the end of this post.
Till next time, happy learning!
– Will
Love this post? Hate it? Is someone wrong on the internet? Is it me? Please feel free to @me on mastodon
I used to host comments on the blog, but have recently stopped. Previously posted comments will still appear, but for new ones please use the mastodon link above.
Discussion