DOCs: Clarify Favicon

[dariagrudzien]

Bug Report

Describe the bug

Setting a favicon (at least non-SVG) doesn't seem possible.

Expected behavior

When I put a favicon.ico file into static/ folder and set favicon = true in config.toml I expect the favicon to appear on the browser tab.

I'd also prefer to set the explicit favicon path in [params] section rather than depend on implicit rules.

Screenshots

Environment

• Hugo Version: : 0.79
• Browser and Version: Chrome 88.0.4324.96
• Link to Project:: https://github.com/cybermagnolia/cybermagnolia.com/blob/main/config.toml#L39

Additional context

@pacollins Reopening #206 as I still can't figure it out. I combed GitHub to find a project which successfully set the favicon and found this website with following config I can see that the favicon is located in static/ directly, named favicon.ico.

So that's exactly what I set in my project, remembering to increment the version as you suggested

At this point I think I tried every combination to troubleshoot this:

• I tried this favicon in a different project using the Ananke theme and it worked right away
• I used a different favicon which works on the site using the Ananke theme and it doesn't work when I put it into this project.

I'm out of ideas at this point :)

[pacollins]

Can you turn SVG on for me? I think I see the problem.... If so, I'm dumb.

hugo-future-imperfect-slim/layouts/partials/meta.html

Lines 10 to 14 in 80efb2d

	{{ if .Site.Params.meta.svg }}
	<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL}}{{ with .Site.Params.meta.faviconVersion }}?v={{ . }}{{ end }}" color="{{ .Site.Params.meta.msColor }}">
	<link rel="shortcut icon" href="{{ "favicon/favicon.ico" | relURL}}{{ with .Site.Params.meta.faviconVersion }}?v={{ . }}{{ end }}">
	<meta name="msapplication-config" content="{{ "favicon/browserconfig.xml" | relURL}}{{ with .Site.Params.meta.faviconVersion }}?v={{ . }}{{ end }}">
	{{ end }}

I'd also prefer to set the explicit favicon path in [params] section rather than depend on implicit rules.

The reasoning for this is to allow for a more robust favicon (including bookmark tiles on mobile). This is addressed in the wiki.

[dariagrudzien]

@pacollins I did enable SVG with no success. Here's my current params.meta config:

    favicon             = false
    svg                 = true
    faviconVersion      = "8"
    msColor             = "#ffffff"
    iOSColor            = "#ffffff"

The favicon is called favicon.ico and placed in static directory directly. I used https://favicon.io/favicon-converter/ to convert a png file into ico in case I was making a mistake with format conversion. Nothing changes.

Update: I set this:

    favicon             = false
    svg                 = true

And it worked!:tada: Alas, I moved the file around to confirm it, then moved it back into static directory, and it stopped working again. I incremented the faviconVersion number, it still doesn't work.

The reasoning for this is to allow for a more robust favicon (including bookmark tiles on mobile). This is addressed in the wiki.

I know, I've read the wiki. But my thinking is "I'd rather it worked somewhat, than conceptually worked great" :)

[pacollins]

It does work, you are just not putting the favicon in the right directory. It should be in static/favicon thus be static/favicon/favicon.ico.

Upon inspecting the wiki, it looks like my wording is not accurate to what I intended. There is not support for a root directory favicon. That would need to be a PR adding {{ else }} at line 17, which I can do later today.

hugo-future-imperfect-slim/layouts/partials/meta.html

Line 12 in 80efb2d

<link rel="shortcut icon" href="{{ "favicon/favicon.ico" | relURL}}{{ with .Site.Params.meta.faviconVersion }}?v={{ . }}{{ end }}">

[dariagrudzien]

You're right. I placed the icon in static/favicon/ and set this params.meta config:

    favicon             = true
    svg                 = true
    faviconVersion      = "1"

Now it works. I'd just update the docs with the file location, so that it's explicit.

Thank you for help 🌸 It's been bugging me for months.