OpenZeppelin
Favicon does not show in browser
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
It currently only appears to work on Firefox, but not any other browser.
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.
https://github.com/user-attachments/assets/b08f47d9-daa7-414f-b6c1-05f9b04901f3
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 the antora JS library is responsible for these changes