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.

I think you have followed the wrong way. WordPress has built in feature to add favicon. You can add favicon via `Appearance > Customize > Site Identity`. For more info please follow https://nerodev.com/how-to-add-favicon-in-wordpress/ — WP Learner, Feb 15 '19 at 11:02
I've already add favicon from Site Identity... It's the only page where I can add the favicon. — pirmax, Feb 15 '19 at 11:22
Done, but already the same problem. On back, I have the favicon, not on front. — pirmax, Feb 15 '19 at 11:32

score 5 · Accepted Answer · answered Feb 15 '19 at 19:00

5

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.

answered Feb 15 '19 at 19:00

philippe_b

38,730
7
57
59

Great! Does this come from a plugin? Or did you injected this code yourself? – philippe_b Feb 15 '19 at 19:09
Then I suggest you to inject this code in the footer. See https://wordpress.stackexchange.com/questions/174192/insert-plugin-content-before-body-end – philippe_b Feb 16 '19 at 19:52
1

Perfect! Thanks! :) – Randy Jan 17 '20 at 19:09
1

Thank you so much for this answer. I spent hours on this before I found your answer. Someone had put a tracking pixel in the that used an tag. – Clayton Leis May 03 '23 at 22:45

WP Learner · Answer 2 · 2019-02-21T05:59:51.017

2

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.

edited Feb 21 '19 at 05:59

answered Feb 15 '19 at 11:07

WP Learner

788
1
13
34

KBell · Answer 3 · 2019-02-15T11:32:58.973

0

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.

edited Feb 15 '19 at 11:32

answered Feb 15 '19 at 11:03

KBell

502
8
23

ulanko · Answer 4 · 2022-09-28T14:26:43.373

0

This approach might help if you cannot fix invalid head markup explained by @philippe_b:

remove_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_head', 'wp_site_icon', 0 );

Add it to functions.php in your child theme. This way we print site icons on top of head.

edited Sep 28 '22 at 14:26

answered Sep 28 '22 at 14:25

ulanko

1
2

WordPress Favicon not showing on Google Chrome tab

4 Answers4

Linked