Favicons are not being displayed.

[Welding-Torch]

Hey @imfing

The template is mostly working out great, but there's a small persisting issue of the custom favicons. I tried cloning a fresh starter template and following the instructions we added in PR #37, but I cannot seem to override the default favicons. I created a video to demo this:

Hextra.Favicon.Issue.mp4

In the above video, I have:

1. Cloned the Hextra Starter Template.
2. Run the server.
3. Created a folder called static.
4. Pasted favicons into it.
5. Restarted the server.

Let's find a solution to this.

[Welding-Torch]

Additional Information:

If I create a file named favicons.html and place it at /layouts/partials/favicons.html and add the following code to it:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

then the favicon displays, but only on the homepage of the site. The favicon does not display if I go to the Docs or About pages.

[imfing]

Hey @imfing

The template is mostly working out great, but there's a small persisting issue of the custom favicons. I tried cloning a fresh starter template and following the instructions we added in PR #37, but I cannot seem to override the default favicons. I created a video to demo this:

Hextra.Favicon.Issue.mp4

In the above video, I have:

1. Cloned the Hextra Starter Template.

2. Run the server.

3. Created a folder called static.

4. Pasted favicons into it.

5. Restarted the server.

Let's find a solution to this.

After restarted the server, could you also try restarting the browser? or open the URL in incognito?

[imfing]

@Welding-Torch

I think you're missing the files favicon.svg and favicon-dark.svg (optional), as the SVG favicons take precedence over the favicon.ico file.

SVG favicons are supported by modern web browsers, while the .ico favicon is mainly for backward compatibility. I should highlight this in the documentation.

[Welding-Torch]

I added the favicon-dark.svg file and opened in incognito, and now the favicon loads everywhere. Solved!

[pierow2k]

I struggled with this issue a bit today. It's probably worth pointing out that without specifically adding favicon-dark.svg, the default icon is displayed if you're viewing in dark mode. The documentation only specifically calls out a need for favicon.ico and favicon.svg so I missed this initially.

Include both favicon.ico and favicon.svg files in your project to ensure your site’s favicons display correctly.