diff --git a/content-src/components/SiteIcon/SiteIcon.js b/content-src/components/SiteIcon/SiteIcon.js
index 191b109a30..3020e8628a 100644
--- a/content-src/components/SiteIcon/SiteIcon.js
+++ b/content-src/components/SiteIcon/SiteIcon.js
@@ -34,7 +34,7 @@ const SiteIcon = React.createClass({
![]({site.favicon})
-
{site.firstLetter}
+
{site.label}
);
diff --git a/content-src/components/SiteIcon/SiteIcon.scss b/content-src/components/SiteIcon/SiteIcon.scss
index d5b3dec38c..41b7aaa02d 100644
--- a/content-src/components/SiteIcon/SiteIcon.scss
+++ b/content-src/components/SiteIcon/SiteIcon.scss
@@ -27,6 +27,10 @@
.site-icon-fallback {
text-transform: uppercase;
opacity: 0.75;
+
+ &::after {
+ content: attr(data-first-letter);
+ }
}
.site-icon-title {
diff --git a/content-test/components/SiteIcon.test.js b/content-test/components/SiteIcon.test.js
index 78835cb9ca..b660c75de1 100644
--- a/content-test/components/SiteIcon.test.js
+++ b/content-test/components/SiteIcon.test.js
@@ -97,7 +97,10 @@ describe("SiteIcon", () => {
assert.equal(instance.refs.background.style.backgroundColor, "rgb(0, 0, 0)");
});
it("should use the first letter of the host name", () => {
- assert.equal(instance.refs.fallback.innerHTML, "f");
+ assert.equal(instance.refs.fallback.dataset.firstLetter, "f");
+ });
+ it("should not affect the content text", () => {
+ assert.equal(instance.refs.fallback.innerHTML, "");
});
});
});