Hugo Tutorial
Emoji Favicon for Hugo
Add an emoji favicon to your Hugo site by editing the <head> partial.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Hugo
1
Find or create layouts/partials/head.html
Most themes include a head partial. If not, create one at layouts/partials/head.html.
2
Add the favicon tags
Paste the link tags inside the partial.
{{/* layouts/partials/head.html */}}
<link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket">
<link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket">3
Delete static/favicon.ico
If the starter theme shipped one, remove it.
Popular emoji favicons for Hugo
Click any emoji to see the Hugo-specific install snippet.
Troubleshooting
Theme overrides head.html
Override the theme’s partial by copying it to your site’s layouts/partials/head.html.
Hugo rebuild missing the link
Run hugo --cleanDestinationDir and redeploy.
Hugo Pipes interfering
Favicons are not processed by Hugo Pipes. This is not a Pipes issue.
Frequently asked questions
Does it work with every Hugo theme?
Yes — partials are theme-agnostic.
Does it work on Netlify / Cloudflare Pages?
Yes — Hugo emits static HTML with the link baked in.