diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh-style.css
index 76a6664..bed9c46 100644
--- a/portal/assets/css/ynh-style.css
+++ b/portal/assets/css/ynh-style.css
@@ -331,13 +331,12 @@ textarea {
     -webkit-transform: skew(0deg, 45deg);
   }
 
-.listing-apps span {
-  display: block;
-  margin: -1.2em 0 0 0.2em;
-}
-  .listing-apps .first-letter { margin: 0; }
-  .listing-apps .first-letter:before {
-    content: attr(data-first-letter);
+  .listing-apps span {
+    display: block;
+    margin: -1.2em 0 0 0.2em;
+  }
+  .listing-apps .first-letter {
+    margin: 0;
     display: inline-block;
   }
   .listing-apps .name {
diff --git a/portal/assets/js/ynhpanel.js b/portal/assets/js/ynhpanel.js
index dbf056f..43cb189 100644
--- a/portal/assets/js/ynhpanel.js
+++ b/portal/assets/js/ynhpanel.js
@@ -350,7 +350,7 @@ function set_app_tile_style(el)
     // Add color class.
     el.classList.add(app_tile_colors[randomColorNumber]);
     // Set first-letter data attribute.
-    el.querySelector('.first-letter').setAttribute('data-first-letter', el.textContent.substring(0, 2));
+    el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2);
 }
 
 function tweak_portal_when_in_iframe()
diff --git a/portal/info.html b/portal/info.html
index c7d6cb7..c95ab04 100644
--- a/portal/info.html
+++ b/portal/info.html
@@ -14,7 +14,12 @@
 <div id="apps" class="wrapper apps">
   <ul class="listing-apps">
   {{#app}}
-    <li><a class="app-tile" href="https://{{url}}"><span class="first-letter"></span><span class="name">{{name}}</span></a></li>
+    <li>
+      <a class="app-tile" href="https://{{url}}" data-appname="{{name}}">
+        <span class="first-letter"></span>
+        <span class="name">{{name}}</span>
+      </a>
+    </li>
   {{/app}}
   </ul>
 </div>