diff --git a/src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminBranding.cshtml b/src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminBranding.cshtml
index 2db89a9816c..e6808c33c9c 100644
--- a/src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminBranding.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminBranding.cshtml
@@ -1,6 +1,7 @@
 @inject IOptions<AdminOptions> AdminOptions
-<link asp-src="~/OrchardCore.Admin/favicon.ico" type="image/x-icon" rel="shortcut icon" />
-
+<zone name="HeadMeta">
+    <link asp-src="~/OrchardCore.Admin/favicon.ico" type="image/x-icon" rel="shortcut icon" />
+</zone>
 <a class="ta-navbar-brand navbar-brand" href="@Url.Content("~/" + AdminOptions.Value.AdminUrlPrefix)">
     <div class="d-flex align-items-center">
         <img src="@Url.Content("~/OrchardCore.Admin/logo.png")" alt="@Site.SiteName" class="pe-2" />
diff --git a/src/docs/reference/modules/Admin/README.md b/src/docs/reference/modules/Admin/README.md
index db9bd1eab26..189c75b0861 100644
--- a/src/docs/reference/modules/Admin/README.md
+++ b/src/docs/reference/modules/Admin/README.md
@@ -17,7 +17,7 @@ If you want to specify another prefix in the urls to access the admin section, y
 
 By default, OrchardCore logo and site name are displayed in the top navbar.
 
-You can change it by overriding 'AdminBranding' shape, either from a [custom admin theme](../../../guides/create-admin-theme/README.md) or using Admin Templates feature.
+You can change it by overriding 'AdminBranding' shape, either from a [custom admin theme](../../../guides/create-admin-theme/README.md) or using Admin Templates feature.  
 You can also use this shape to define admin favicon.
 
 Here are samples using logo and favicon from media module.
@@ -26,20 +26,27 @@ Here are samples using logo and favicon from media module.
 
     ``` liquid
     {% assign favicon_url = 'favicon.ico' | asset_url %}
-    {% link rel:'shortcut icon', type:'image/x-icon', src:favicon_url %}
+    {% zone "HeadMeta" %}
+        {% link rel:'shortcut icon', type:'image/x-icon', src:favicon_url %}
+    {% endzone %}
     {% a area: 'OrchardCore.Admin', controller: 'Admin' , action: 'Index', class: 'ta-navbar-brand' %}
-        <img src="{{ 'logo.png' | asset_url }}" alt="{{ Site.SiteName }}" />
-        <span>{{ Site.SiteName }}</span>
+        <div class="d-flex align-items-center">
+            <img src="{{ 'logo.png' | asset_url }}" alt="{{ Site.SiteName }}" class="pe-2" />
+            <span>{{ Site.SiteName }}</span>
+        </div>
     {% enda %}
     ```
 
 === "Razor"
 
     ``` html
-    <link asp-src="~/media/favicon.ico" type="image/x-icon" rel="shortcut icon" />
-
+    <zone name="HeadMeta">
+        <link asp-src="~/media/favicon.ico" type="image/x-icon" rel="shortcut icon" />
+    </zone>
     <a class="ta-navbar-brand" asp-route-area="OrchardCore.Admin" asp-controller="Admin" asp-action="Index">
-        <img src=@Url.Content("~/media/logo.png") alt="@Site.SiteName" />
-        <span>@Site.SiteName</span>
+        <div class="d-flex align-items-center">
+            <img src=@Url.Content("~/media/logo.png") alt="@Site.SiteName" class="pe-2" />
+            <span>@Site.SiteName</span>
+        </div>
     </a>
     ```
\ No newline at end of file