Custom Favicon in the Browser's Title Bar

[zigmd]

I'm trying to change the icon in the browser's title bar, but unable to do so.

I have the below files in the static/ directory:

static
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon.ico
├── favicon.png
├── favicon.svg
└── robots.txt

and hugo.yaml contains:

params:
  navbar:
    displayTitle: true
    displayLogo: true
    logo:
      path: favicon.svg
      dark: favicon.svg

How can I ensure that a custom icon gets displayed in the browser's title bar?

[imfing]

You on the right track, just put the favicons under the static directory of your own site:

.
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-dark.svg
├── favicon.ico
├── favicon.svg

which will replace the default favicons from the theme.

[zigmd]

Works !! Thank you!

[c2tz]

@saurabh-mish I'd just like to add that favicon-dark is optional because you can also edit the css directly in the svg. this has many advantages and if you don't know about it you can find out more here : https://web.dev/articles/building/an-adaptive-favicon

[imfing]

https://github.com/imfing/hextra/blob/main/layouts/partials/favicons.html

favicon-dark.svg is still needed because it's hard-coded in the above template. You may need to remove the favicon-dark line if you are using an unified adaptive svg favicon.

the reason I didn't use a single svg favicon in Hextra was that i think it would be tricky for our users to edit css and svg to make it work correctly.

[m-mattia-m]

I used the hextra-starter-template and created a static-folder in the content-folder and added all favicon files there. In hugo.yaml I used as navbar-logo a logo which is stored in static/images/.... Is there anything else I need to consider?

See https://github.com/mattiamueggler/Formtion-Docs

[imfing]

@m-mattia-m Hi Mattia, can you try moving the content/static to the outside so it's under the root:

content/
static/

[m-mattia-m]

@imfing Hi Fing, I have tried that now, unfortunately the problem was not solved. Do I have to adjust something in the hugo.yaml or activate the favicon (as I have seen it should happen automatically or). My structure now looks like this: :)

content/
static/
    favicon.ico
    favicon-16x16.png
    ...

[imfing]

@m-mattia-m you also need to include favicon.svg and favicon-dark.svg:

https://imfing.github.io/hextra/docs/guide/configuration/#favicon

there's nothing need to configure in the hugo.yaml

[m-mattia-m]

@imfing I have overlooked this page, sorry. Thank you now everything works. :)