WordPress Favicon not showing on Google Chrome tab

Question

Since a few weeks, the favicon of my webzine is no longer displayed, and this on the browser of my work, but also on my personal PC.

I do not think I have changed the configuration. I tried to re-upload it, to no avail.

https://www.yubigeek.com/

In the Google Chrome Developer Console, there is an error on favicon.ico (404) but in the source code of the page, this URL is not called.

There are however two tag link with a rel = "icon" and the URL of the favicon, if I click on the links, the images are there.

Answer 1

The best way to add WordPress Favicon is adding favicon via Appearance > Customize > Site Identity. Create favicon image at least by 512 x 512 and follow the path to navigate. Then upload the image in Site Identity section. Save it and you're done.

Please follow this for more info.

Answer 2

This is due to a div markup which wrongly appears if the head section of your pages. Such markup should only be in the body.

More details

Most browsers accept body-only markups in head. But Chrome has a particular behavior. When this happens, Chrome considers the head section to be closed. Therefore, following head markups are actually considered to be in the body. And since favicon markups do not work when there are in body...

This is why your favicon fails on Chrome but works on Firefox.

How to fix

Your first two div are around line 153, still in the head. As a hint, their ids are fb-root and fb-customerchat. That should help you spot which plugin is doing this.

Should you disable this plugin, at least for now? Your choice.

You should also report this issue to the plugin developer. You must not be the only one impacted by this issue.

Answer 3

It seems you're using a PNG image, you can try to add attribute type.

So your link would be something like : <link rel="icon" href="yourpath" type="image/png">

EDIT : Plus, put your .ico file in the root of you website if it's not already done.