Can't add favicon

[kiyubits]

Hi i'm having issues with adding my own favicon

I've tried adding the favicon to the static folder static/favicon.ico but it isn't showing

I tried looking at the example config.toml and it doesn't mention the favicon location, it leads me to believe that simply adding the favicon files in the static folder will make the favicon show after publishing (i think?), but that hasn't worked for me

Adding my own images (like an avatar) worked though, with my hugo.toml file having

avatarURL = "images/avatar.jpg"

(for some reason putting a "/" before images doesn't work for me), but the same thing with favicon = ... doesn't work

much appreciated :D

[yashmehrotra]

@kiyubits Can you share a screenshot of your browser network tab which shows the request for the favicon, it's path and http status code

[jamesericdavidson]

It looks like requesting any resource in your static/ directory results in 404, even when served locally.

Your repo is composed in an interesting way (no submodule, for instance?) gh doesn't recurse submodules by default, oops!

@kiyubits After testing locally, I believe this is related to your baseURL:

baseURL = "https://kiyubits.github.io/kiyubytes/"

Specifically, /kiyubytes/ is interfering with relative and absolute paths. Relating to your earlier point:

(for some reason putting a "/" before images doesn't work for me), but the same thing with favicon = ... doesn't work

When I set the following baseURL, requesting the favicon.ico (and other static/ resources) results in HTTP 200:

baseURL = "https://kiyubits.github.io/"

[jamesericdavidson]

Earmarking for future reference: #79 and #129 may be related.

[kiyubits]

So is the simple solution just changing the domain name to remove the sub directory /kiyubytes/ from the base URL?

Also, the avatar.jpg is called correctly on the home page and displays correctly, but when I go into the post it doesn't work and calls from the wrong location:

GET https://kiyubits.github.io/kiyubytes/posts/first_post/images/avatar.jpg 404 (Not Found)

avatar.jpg is not in the posts directory, its in static so that's acting strange.

Also I'm not sure how to find the favicon in the browser network tab, how are favicons added using this theme? (I couldn't get a clear picture from the documentation)

[jamesericdavidson]

So is the simple solution just changing the domain name to remove the sub directory /kiyubytes/ from the base URL?

Yes.

Also, the avatar.jpg is called correctly on the home page and displays correctly, but when I go into the post it doesn't work and calls from the wrong location:

GET https://kiyubits.github.io/kiyubytes/posts/first_post/images/avatar.jpg 404 (Not Found)

avatar.jpg is not in the posts directory, its in static so that's acting strange.

I suspect this is related, and can be solved as above.

[jamesericdavidson]

Also I'm not sure how to find the favicon in the browser network tab, how are favicons added using this theme? (I couldn't get a clear picture from the documentation)

@kiyubits

Network tab

On Firefox, press F12 and go to the Network tab (Chromium browsers should be similar):

Favicons

The documentation is here: https://gokarna-hugo.netlify.app/posts/theme-documentation-basics/#favicons-browserconfig-manifest

For example, my static/ directory looks like this:

[jamesericdavidson]

@kiyubits Do you want to try my solution? It'd be great to have another data point to base further investigation/documentation on. 🙂

[kiyubits]

Hey sorry I've been a little busy the past few days, but yeah I plan to recreate the whole repo but with the baseURL that you mentioned, and I'll see if that resolves the issues. If it does work then it would be nice if the documentation added a note that having a subdirectory as part of the baseURL might cause these kinds of issues :)

[jamesericdavidson]

Great! I noted here that similar issues have been lodged in this repo, so there may be a deeper cause which has gone unidentified; Hugo's own documentation defines a baseURL similar to your own.

N.B. You can change your default branch (and re-write the Git history, if you wish), or change the baseURL in one commit. I don't know how that affects GitHub pages. Best of luck 😁

[pkierski]

As a workaround you can add something like:

    <link rel="icon" href="/blog/favicon.ico">

to customHeadHTML parameter in configuration. <link rel="icon" ...> takes precendence over default /favicon.ico. Here is more about favicons and ways for adding it to the page.

[jamesericdavidson]

The favicon 404 is one symptom of a misdeclared baseURL, other issues present themselves (such as navigation completely breaking on the local server)