My problem is that with my hugo.toml configuration on my hinode hugo website the image in the top left corner of the website, typically referred as navigation bar logo is not rendering right. This is how it looks right now.
This is my folder structure:
.
├── archetypes
│ └── default.md
├── assets
│ └── img
│ ├── apple-touch-icon.png
│ ├── css
│ │ └── custom.css
│ ├── logo1280x640.png
│ ├── logo512x512.png
│ ├── logo_design.svg
│ ├── logo_embedded.svg
│ ├── logo.ico
│ ├── logo_icon.png
│ ├── logo_icon.svg
│ ├── logo.png
│ ├── logo.svg
│ ├── site.webmanifest
│ ├── web-app-manifest-192x192.png
│ └── web-app-manifest-512x512.png
├── content
│ └── de
│ ├── _index.md
│ └── snow
│ ├── test2.md
│ └── test.md
├── data
├── go.mod
├── go.sum
├── hugo.toml
├── i18n
├── layouts
│ ├── de
│ │ └── list.html
│ └── _partials
│ └── favicon.html
├── static
│ └── img
│ ├── apple-touch-icon.png
│ ├── logo1280x640.png
│ ├── logo512x512.png
│ ├── logo_design.svg
│ ├── logo_embedded.svg
│ ├── logo.ico
│ ├── logo_icon.png
│ ├── logo_icon.svg
│ ├── logo.png
│ ├── logo.svg
│ ├── site.webmanifest
│ ├── web-app-manifest-192x192.png
│ └── web-app-manifest-512x512.png
└── themes
And this is my hugo.toml:
baseURL = "https://johni12.github.io/snow_project/"
title = "Snow Project"
defaultContentLanguage = "de"
languageCode = "de"
[module]
[[module.imports]]
path = "github.com/gethinode/hinode"
[[module.imports]]
path = "github.com/gethinode/mod-flexsearch/v3"
[languages]
[languages.de]
languageName = "Deutsch"
weight = 1
contentDir = "content/de"
[params.favicon]
logo = "img/logo.png"
sizes = [16, 32, 96, 192]
You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.
See Requesting Help.
Let us see your code
Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
Thank you for your fast response!
I now pushed my locally not working code to my github repository, you can find it here:
Link to Repository
If there is anything else i can provide you for getting an answer to this problem i will of course do that!
Looking at your code, it appears your navbar logo uses an embedded png file (using base64 encoding) instead of being a true SVG file. Hinode has difficulty processing / resizing this file. You have two options to correct this:
- Use an explicit .png file in your navigation configuration
- Convert your embedded .png file to a true .svg file
Regarding the first option, adding the following configuration to your hugo.toml appears to solve the issue:
[params.navigation]
anchor = true
logo = "/img/logo_icon.png"
logo-height = 30
Thank you for your fast response!
As I’m fairly new to Hugo it would be really helpful if you could also tell me how I could implement different icons (favican and navbar icon) for dark and light scheme.
If you upgrade to Hinode v1.15.1or later, you can set logo-modeto true in params.navigation. The docs provide additional information.
[params.navigation]
logo-mode = true
I dont quite understand how this should work, for me, when i activate this logo mode it still just uses the light mode picture, could you help me out there?
Also, when i updated my hugo and hinode versions, the logo got somehow stretches, I would really appreciate to get help there!
This example should clarify how to use mode-aware images: Hinode - Image
I noticed you’re using a bitmap (.png) file for the navbar logo. I’ve released a fix to improve the behavior of the navbar using bitmap icons in Hinode v1.17.1.
BTW, you might want to submit issues with the Hinode theme directly to the Hinode issue tracker. You can post general support questions in GitHub discussions. The folks from the Hugo community are very helpful in general, but I doubt they can do much to address these theme-specific issues.
1 Like
Maybe that‘s why it wasn‘t working and got stretched 
, now I‘m using svg. But good to know that got fixed!
