The links on the site seem to work ok, but in trying to add favicon and checking the devtools it looks like I have misunderstood how to configure hugo.
GEThttp://localhost:1313/apple-touch-icon.png
[HTTP/1.1 404 Not Found 0ms]
GEThttp://localhost:1313/favicon-16x16.png
[HTTP/1.1 404 Not Found 1ms]
Source map error: Error: request failed with status 404
Resource URL: http://localhost:1313/hugo-scratch-1/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
So, how to get a config that works with localhost and live…
Thanks for Hugo. It is so great to be creating a real site and learning so much about how the web works.
This is not an issue with the configuration. These files just don’t exist. Put an apple-touch-icon.png into the folder /static and a favicon-16x16.png too. Everything in static will be copied over to the root of the compiled site. Subfolders in static create subfolders in the site.
Regarding that source map error: that’s a quite common error, because on live sites source maps are not required, so some themes might create their styles and scripts without source maps. You could ignore it. Or go and download the source map file from the official bootstrap dist folder and copy right next to bootstrap.min.css. But it’s really not needed. That file is helpful in development, because the min in the filename implies that the file has been minified and parameter names might be unreadable.
Thanks for the responses. Made change in local copy. Then hugo -D, but am learning git at the same time, so encountered a rabbit hole…
git commit -m "favicon manifest now relURL"
git push -u origin master
error: failed to push some refs to 'https://github.com/dormouseroared/hugo-scratch-1.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
So, will suspend this for the moment whilst grappling with git.
I have tried the simplest html with a single line like this, independent of hugo, which works in live server mode using local host (I do not understand what the manifest is doing anyway):
so I will set up a new hugo site and repo with this simple setup and try the equivalent.
In visual studio code this simple native html with a favicon looks like this, and the fav icon shows when VSC’s live server is used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>favicon test</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
The favicon.ico is in the root folder and it now appears in the tab!
</body>
</html>
Should the equivalent work in Hugo with hugo’s own server, or does it need to go to Git Pages to be built?
Just put this in a git repo and loaded into Pages, and this is confusing because the favicon shows with VSC live server but not with github hosting:
GEThttps://dormouseroared.github.io/favicon.ico
[HTTP/2 404 Not Found 0ms]
The latest simple native HTML now shows the favicon on the tab in both VSC live server and Github Pages after changing href="/favicon.ico" to href=“favicon.ico” with both index.html and favicon.ico at the same root level.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>favicon test</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
The favicon.ico is in the root folder and it now appears in the tab!
</body>
</html>
Now to try the equivalent in Hugo with my understanding being:
this index.html goes in /Layouts
the favicon.ico should go in /Static
not sure about the href, so with or without leading /… or something else?
After simplifying how to make the favicon appear, and thinking it was sorted, realised that the favicon was then not appearing when content was selected and that one way would be to use absURL on the favicon when using layouts/partial/head.html
So, many thanks for the great responses that took some time to get through and emphasise the importance of learning to compare the templates to the actual generated html. Will now go back through the tutorial to learn more.
