Favicon does not load on child theme

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author phbernard

    (@phbernard)

    As far as I can see, your favicon is correct:
    – It is properly declared in the HTML code.
    – The links work (eg. https://science4fun.org/it/wp-content/uploads/fbrfg/apple-touch-icon-57×57.png)
    – Your favicon is displayed correctly in IE 11, Firefox and Safari (Windows).

    Yet, it fails on Chrome (both desktop and Android) and Opera (Windows).

    I think this is because of the following code in the header of your HTML pages:

    <div id=”fb-root”></div>

    A div is not supposed to appear in the head section, but in the body section. When Chrome encounters this case, it (wrongly) considers the head section to be closed. And because the favicon declarations are after this div, Chrome think they are in the body and thus ignore them.

    What you need to do is to find what is injecting this faulty div. Probably a plugin. Apparently, this is related to Facebook. Some Sharing buttons maybe? Ids I can see around are alvoiframe and sombrafbc. If one of them sounds like the name of one of your plugin, you probably found the culprit.

    Once you know the plugin, you should contact its author. This div is a big, it can disrupt many other things, not just favicons.

    And if none of the above works, you can deactive RFG’s plugin and install your favicon manually. Go to https://realfavicongenerator.net/ and follow the instructions of https://codex.www.ads-software.com/Creating_a_Favicon. Make sure to add the favicon code close to the top of the head section, else the same issue will occur again.

    Does this help?

    Thread Starter superciccio14

    (@superciccio14)

    HI phbernard, thanks for your prompt reply.I have just analyzed my

    <head>...<head>

    but I didn’t find the faulty div you suggested. There is a

    <div id="fb-root"></div>

    in the body but not in the header…but I’m not an expert and I could be wrong…

    Plugin Author phbernard

    (@phbernard)

    I’ve just checked again. The div is in the head, not in the body, really.

    However, there is a trick. With Chrome, when I do “View page source”, I see the div in the header. This view is the verbatim HTML code, without processing from Chrome. But if I inspect page elements (Ctrl+Shit+I), this time the div is in the body (and the the favicon declarations too). This is because this view does not display the source code, but the internal representation of the document. And because of the behavior described in my first message, Chrome decides that the div is in the body, even it it didn’t actually encounter ...</head><body>... in the HTML page.

    Plugin Author phbernard

    (@phbernard)

    Hi,

    Did you identify the source of this faulty div? Or at least, did you install the favicon manually to make it work?

    Thread Starter superciccio14

    (@superciccio14)

    Hi phbernard, sorry for my late reply.

    The div is in the head, as you mentioned. I didn’t find it because I was exploring the (post-processed) code by “Inspect Element”.

    This plugin https://www.ads-software.com/plugins/facebook-lightbox-comments/ was injecting the faulty div. The plugin seems to be no longer supported, then I disabled it.

    Now the favicon is visualized properly also in Chrome. : )

    Thanks a lot for your support once again!

    Plugin Author phbernard

    (@phbernard)

    Great! I’m glad you found the issue. Too bad the plugin is not updated…

    You’re welcome! Thank you to take the time to exchange with me. Getting such feedback helps me to understand this kind of issues better.

    Thread Starter superciccio14

    (@superciccio14)

    You are welcome ??

    Plugin Author phbernard

    (@phbernard)

    For your information, I was reported this issue again: https://www.ads-software.com/support/topic/works-on-firefox-and-ie-not-on-chrome

    I posted an issue to the author of Facebook Lightbox Comments: https://www.ads-software.com/support/topic/div-added-to-the-header

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Favicon does not load on child theme’ is closed to new replies.