diff --git a/browser/base/content/browser-siteIdentity.js b/browser/base/content/browser-siteIdentity.js
index cc840c126fdd..d000b804b972 100644
--- a/browser/base/content/browser-siteIdentity.js
+++ b/browser/base/content/browser-siteIdentity.js
@@ -999,6 +999,8 @@ var gIdentityHandler = {
     } else if (this._isSecureConnection) {
       connection = "secure";
       customRoot = this._hasCustomRoot();
+    } else if (this._isAboutCertErrorPage) {
+      connection = "cert-error-page";
     }
 
     // Determine if there are insecure login forms.
diff --git a/browser/base/content/test/siteIdentity/browser_check_identity_state.js b/browser/base/content/test/siteIdentity/browser_check_identity_state.js
index 4abc0fd5bbf1..6866556b1633 100644
--- a/browser/base/content/test/siteIdentity/browser_check_identity_state.js
+++ b/browser/base/content/test/siteIdentity/browser_check_identity_state.js
@@ -25,6 +25,19 @@ function getConnectionState() {
   return document.getElementById("identity-popup").getAttribute("connection");
 }
 
+function getSecurityConnectionBG() {
+  // Get the background image of the security connection.
+  document.getElementById("identity-box").click();
+  gIdentityHandler.refreshIdentityPopup();
+  return gBrowser.ownerGlobal
+    .getComputedStyle(
+      document
+        .getElementById("identity-popup-mainView")
+        .getElementsByClassName("identity-popup-security-connection")[0]
+    )
+    .getPropertyValue("background-image");
+}
+
 function getReaderModeURL() {
   // Gets the reader mode URL from "identity-popup mainView panel header span"
   document.getElementById("identity-box").click();
@@ -333,15 +346,31 @@ async function noCertErrorTest(secureCheck) {
   let promise = BrowserTestUtils.waitForErrorPage(gBrowser.selectedBrowser);
   BrowserTestUtils.loadURI(gBrowser, "https://nocert.example.com/");
   await promise;
-  is(getIdentityMode(), "unknownIdentity", "Identity should be unknown");
-  is(getConnectionState(), "not-secure", "Connection should be file");
+  is(
+    getIdentityMode(),
+    "certErrorPage",
+    "Identity should be the cert error page."
+  );
+  is(
+    getConnectionState(),
+    "cert-error-page",
+    "Connection should be the cert error page."
+  );
 
   gBrowser.selectedTab = oldTab;
   is(getIdentityMode(), "unknownIdentity", "Identity should be unknown");
 
   gBrowser.selectedTab = newTab;
-  is(getIdentityMode(), "unknownIdentity", "Identity should be unknown");
-  is(getConnectionState(), "not-secure", "Connection should be file");
+  is(
+    getIdentityMode(),
+    "certErrorPage",
+    "Identity should be the cert error page."
+  );
+  is(
+    getConnectionState(),
+    "cert-error-page",
+    "Connection should be the cert error page."
+  );
 
   gBrowser.removeTab(newTab);
   gBrowser.removeTab(oldTab);
@@ -376,8 +405,16 @@ async function noCertErrorFromNavigationTest(secureCheck) {
     true,
     "Should be an about:certerror"
   );
-  is(getIdentityMode(), "unknownIdentity", "Identity should be unknown");
-  is(getConnectionState(), "not-secure", "Connection should be file");
+  is(
+    getIdentityMode(),
+    "certErrorPage",
+    "Identity should be the cert error page."
+  );
+  is(
+    getConnectionState(),
+    "cert-error-page",
+    "Connection should be the cert error page."
+  );
 
   gBrowser.removeTab(newTab);
 
@@ -389,6 +426,22 @@ add_task(async function test_about_net_error_uri_from_navigation_tab() {
   await noCertErrorFromNavigationTest(false);
 });
 
+add_task(async function noCertErrorSecurityConnectionBGTest() {
+  let tab = BrowserTestUtils.addTab(gBrowser);
+  gBrowser.selectedTab = tab;
+  let promise = BrowserTestUtils.waitForErrorPage(gBrowser.selectedBrowser);
+  BrowserTestUtils.loadURI(gBrowser, "https://nocert.example.com/");
+  await promise;
+
+  is(
+    getSecurityConnectionBG(),
+    `url("chrome://browser/skin/connection-mixed-passive-loaded.svg")`,
+    "Security connection should show a warning lock icon."
+  );
+
+  BrowserTestUtils.removeTab(tab);
+});
+
 async function aboutUriTest(secureCheck) {
   let oldTab = await loadNewTab("about:robots");
   await SpecialPowers.pushPrefEnv({ set: [[INSECURE_ICON_PREF, secureCheck]] });
diff --git a/browser/base/content/test/siteIdentity/browser_identityIcon_img_url.js b/browser/base/content/test/siteIdentity/browser_identityIcon_img_url.js
index 2a356dd5ee47..d8e3b31dab03 100644
--- a/browser/base/content/test/siteIdentity/browser_identityIcon_img_url.js
+++ b/browser/base/content/test/siteIdentity/browser_identityIcon_img_url.js
@@ -55,9 +55,7 @@ const TEST_CASES = [
   {
     type: "certificateError",
     testURL: "https://self-signed.example.com",
-    // We still show a default identity icon for cert error pages. We will
-    // change it to show a not secure lock icon in Bug 1566813.
-    img_url: `url("chrome://browser/skin/identity-icon.svg")`,
+    img_url: `url("chrome://browser/skin/connection-mixed-passive-loaded.svg")`,
   },
   {
     type: "localhost",
diff --git a/browser/base/content/test/siteIdentity/browser_mixed_content_with_navigation.js b/browser/base/content/test/siteIdentity/browser_mixed_content_with_navigation.js
index 6fa1a5995f19..188a7d6fc5f6 100644
--- a/browser/base/content/test/siteIdentity/browser_mixed_content_with_navigation.js
+++ b/browser/base/content/test/siteIdentity/browser_mixed_content_with_navigation.js
@@ -29,7 +29,7 @@ const kTestcases = [
   {
     uri: "https://expired.example.com",
     expectErrorPage: true,
-    expectedIdentityMode: "unknownIdentity",
+    expectedIdentityMode: "certErrorPage",
   },
 ];
 
diff --git a/browser/components/controlcenter/content/identityPanel.inc.xul b/browser/components/controlcenter/content/identityPanel.inc.xul
index 0c13e671f8ed..a162ccfe4cef 100644
--- a/browser/components/controlcenter/content/identityPanel.inc.xul
+++ b/browser/components/controlcenter/content/identityPanel.inc.xul
@@ -29,7 +29,7 @@
 
           <vbox class="identity-popup-security-connection">
             <description class="identity-popup-connection-not-secure"
-                         when-connection="not-secure secure-cert-user-overridden secure-custom-root">&identity.connectionNotSecure2;</description>
+                         when-connection="not-secure secure-cert-user-overridden secure-custom-root cert-error-page">&identity.connectionNotSecure2;</description>
             <description class="identity-popup-connection-secure"
                          when-connection="secure secure-ev">&identity.connectionSecure3;</description>
             <description when-connection="chrome">&identity.connectionInternal;</description>
@@ -57,13 +57,13 @@
         </vbox>
         <button id="identity-popup-security-expander"
                 class="identity-popup-expander"
-                when-connection="not-secure secure secure-ev secure-cert-user-overridden"
+                when-connection="not-secure secure secure-ev secure-cert-user-overridden cert-error-page"
                 oncommand="gIdentityHandler.showSecuritySubView(); gIdentityHandler.recordClick('security_subview_btn');"/>
       </hbox>
 
       <!-- Permissions Section -->
       <hbox class="identity-popup-section"
-            when-connection="not-secure secure secure-ev secure-cert-user-overridden file extension">
+            when-connection="not-secure secure secure-ev secure-cert-user-overridden file extension cert-error-page">
         <vbox id="identity-popup-permissions-content" flex="1" role="group"
               aria-labelledby="identity-popup-permissions-headline">
           <hbox id="identity-popup-permissions-header" align="center">
@@ -94,7 +94,7 @@
       <vbox class="identity-popup-security-content">
         <vbox class="identity-popup-security-connection">
           <description class="identity-popup-connection-not-secure"
-                       when-connection="not-secure secure-cert-user-overridden">&identity.connectionNotSecureSecurityView;</description>
+                       when-connection="not-secure secure-cert-user-overridden cert-error-page">&identity.connectionNotSecureSecurityView;</description>
           <description class="identity-popup-connection-secure"
                        when-connection="secure secure-ev">&identity.connectionVerified3;</description>
         </vbox>
@@ -123,7 +123,7 @@
                 oncommand="gIdentityHandler.removeCertException()"/>
 
         <!-- Connection is Not Secure -->
-        <description when-connection="not-secure"
+        <description when-connection="not-secure cert-error-page"
                      and-when-loginforms="secure">&identity.description.insecure;</description>
 
         <!-- Insecure login forms -->
diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css
index f63e6a2cf9fe..6bd1784c3ef1 100644
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -47,6 +47,7 @@
 #identity-popup[connection=chrome] [when-connection~=chrome],
 #identity-popup[connection=file] [when-connection~=file],
 #identity-popup[connection=extension] [when-connection~=extension],
+#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page],
 /* Show insecure login forms messages when needed. */
 #identity-popup[loginforms=insecure] [when-loginforms=insecure],
 /* Show weak cipher messages when needed. */
@@ -390,7 +391,8 @@
   -moz-context-properties: fill, fill-opacity;
 }
 
-#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection {
+#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
+#identity-popup[connection=cert-error-page] .identity-popup-security-connection {
   background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
   fill: unset;
   -moz-context-properties: fill;