To set a favicon for your Hugo site, follow these steps:

1. Prepare Your Favicon

  • Create a favicon image, typically a 32x32 pixel .ico file or .png file.
  • You can use free tools like Favicon Generator to create one.

2. Place the Favicon in Your Project

  • Save the favicon file in your Hugo project’s static directory.
  • Example paths:
    • static/favicon.ico
    • static/favicon.png

3. Update Your Site’s HTML Head

Add the following code to the <head> section of your site’s HTML template. This is usually in the layouts/_default/baseof.html or layouts/_default/head.html file, depending on your theme:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Or for PNG -->
<link rel="icon" href="/favicon.png" type="image/png">

4. Test Your Changes

Run your Hugo site locally:

hugo server

Verify that the favicon appears in your browser tab.

5. Deploy Your Site

Once the favicon is working locally, deploy your Hugo site. The favicon should now display correctly on your live site.

Troubleshooting

If your favicon doesn’t appear:

  1. Check for browser caching issues.
  2. Confirm the favicon file is correctly placed in the static folder.

By following these steps, you can easily customize your Hugo site with a unique favicon.

Related Posts