Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Favicon does not show in browser #417

Open
ericglau opened this issue Sep 11, 2024 · 2 comments
Open

Favicon does not show in browser #417

ericglau opened this issue Sep 11, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@ericglau
Copy link
Member

ericglau commented Sep 11, 2024 •
edited
Loading

Favicon does not show in browser, even though these are defined here https://github.com/OpenZeppelin/docs.openzeppelin.com/blob/master/ui/theme/partials/layout.hbs#L26

Screenshot 2024-09-11 at 1 59 49 PM

It currently only appears to work on Firefox, but not any other browser.
@ericglau ericglau added the bug Something isn't working label Sep 11, 2024
@emnul
Copy link

emnul commented Jan 28, 2025

It appears Google Chrome refuses to load <link rel="icon"> tags from inside the document body. Firefox doesn't appear to care whether the link tag appears in the <head> tag or document body. This makes sense considering the HTML standard does not consider link elements with the icon attribute to be body-ok. The fix would be to load the favicons from within the head tag.

faviconBug.mp4

@emnul
Copy link

emnul commented Jan 28, 2025 •
edited
Loading

Examining the GET Response from docs.openzeppelin.com we can see that the HTML served to the client initially is formatted as expected:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="canonical" href="/">
    <data id="ga-key" value="UA-85043059-1"></data>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85043059-1"></script>
<script src="/_/vendor/google-analytics.js"></script>
<!-- Google Tag Manager -->
<data id="gtm-key" value="GTM-W9X5Q6F" ></data>
<script src="/_/vendor/gtm.js"></script>
<!-- End Google Tag Manager -->
    <link rel="stylesheet" href="/_/dist/index.css">
    <title>Documentation - OpenZeppelin Docs</title>
    <meta name="twitter:card" content="summary">
    <meta property="og:title" content="Documentation - OpenZeppelin Docs">
    <meta property="og:image" content="https://docs.openzeppelin.com/_/images/social.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/_/images/favicon-16x16.png"/>
    <link rel="icon" type="image/png" sizes="32x32" href="/_/images/favicon-32x32.png"/>
    <link rel="icon" type="image/png" sizes="96x96" href="/_/images/favicon-96x96.png"/>
    <link rel="icon" type="image/png" sizes="192x192"  href="/_/images/favicon-192x192.png"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap"/>
  <script data-cfasync="false" nonce="62c90330-0593-4692-a3bc-a874b8ed1ca8">TRUNCATED</script></head>

However, when viewing the document in the Elements panel of the Chrome dev tools we can see the head tag has been modified:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="canonical" href="/">
    <script src="https://js.hs-analytics.net/analytics/1738107000000/7795250.js" type="text/javascript" id="hs-analytics"></script><script src="https://js.hscollectedforms.net/collectedforms.js" type="text/javascript" id="CollectedForms-7795250" crossorigin="anonymous" data-leadin-portal-id="7795250" data-leadin-env="prod" data-loader="hs-scriptloader" data-hsjs-portal="7795250" data-hsjs-env="prod" data-hsjs-hublet="na1"></script><script src="https://js.hsleadflows.net/leadflows.js" type="text/javascript" id="LeadFlows-7795250" crossorigin="anonymous" data-leadin-portal-id="7795250" data-leadin-env="prod" data-loader="hs-scriptloader" data-hsjs-portal="7795250" data-hsjs-env="prod" data-hsjs-hublet="na1"></script><script src="https://js.hsadspixel.net/fb.js" type="text/javascript" id="hs-ads-pixel-7795250" data-ads-portal-id="7795250" data-ads-env="prod" data-loader="hs-scriptloader" data-hsjs-portal="7795250" data-hsjs-env="prod" data-hsjs-hublet="na1"></script><script src="https://js.hubspot.com/web-interactives-embed.js" type="text/javascript" id="hubspot-web-interactives-loader" crossorigin="anonymous" data-loader="hs-scriptloader" data-hsjs-portal="7795250" data-hsjs-env="prod" data-hsjs-hublet="na1"></script><script src="https://js.hs-banner.com/v2/7795250/banner.js" type="text/javascript" id="cookieBanner-7795250" data-cookieconsent="ignore" data-hs-ignore="true" data-loader="hs-scriptloader" data-hsjs-portal="7795250" data-hsjs-env="prod" data-hsjs-hublet="na1"></script><script defer="" referrerpolicy="origin" src="/cdn-cgi/zaraz/s.js?TRUNCATED"></script><script>(function(w,d){})(window,document)</script><link rel="stylesheet" href="./_/css/search.css"><style id="_goober">TRUNCATED</style>
</head>

so I suspect there's some JavaScript modifying the document when the page is loaded in the browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ericglau @emnul