diff --git a/public/home/search.js b/public/home/search.js
index f9e815da3d..86b2ad06eb 100644
--- a/public/home/search.js
+++ b/public/home/search.js
@@ -918,6 +918,8 @@ function LetterAvatar(name, size, color) {
   } else {
     initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
   }
+  let initials1 = initials.toUpperCase();
+  initials.toUpperCase();
   if (w.devicePixelRatio) {
     size = size * w.devicePixelRatio;
   }
@@ -934,7 +936,7 @@ function LetterAvatar(name, size, color) {
   context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'";
   context.textAlign = "center";
   context.fillStyle = "#FFF";
-  context.fillText(initials, size / 2, size / 1.5);
+  context.fillText(initials1, size / 2, size / 1.5);
   dataURI = canvas.toDataURL();
   canvas = null;
   return dataURI;
@@ -1009,9 +1011,9 @@ function displayRepoResult(page, jsonResult, onlyReturnNum, keyword) {
       var recordMap = data[i];
       html += '<div class="item">';
       if (recordMap["avatar"]) {
-        html += `<img class="ui avatar image" style="width:28px;height:28px" src="${recordMap["avatar"]}">`;
+        html += `<img class="ui avatar image" src="${recordMap["avatar"]}">`;
       } else {
-        html += `<img class="ui avatar image" style="width:28px;height:28px" avatar="${recordMap["owner_name"]}">`;
+        html += `<img class="ui avatar image" avatar="${recordMap["owner_name"]}">`;
       }
 
       html += '  <div class="content">';
diff --git a/web_src/js/features/letteravatar.js b/web_src/js/features/letteravatar.js
index 9ec12b60f6..3092149d9d 100644
--- a/web_src/js/features/letteravatar.js
+++ b/web_src/js/features/letteravatar.js
@@ -1,74 +1,100 @@
 /**
  * LetterAvatar
- * 
+ *
  * Artur Heinze
  * Create Letter avatar based on Initials
  * based on https://gist.github.com/leecrossley/6027780
  */
-(function(w, d){
-    function LetterAvatar (name, size, color) {
-        name  = name || '';
-        size  = size || 60;
-        var colours = [
-                "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", 
-                "#f1c40f", "#e67e22", "#e74c3c", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
-            ],
-            nameSplit = String(name).split(' '),
-            initials, charIndex, colourIndex, canvas, context, dataURI;
-        if (nameSplit.length == 1) {
-            initials = nameSplit[0] ? nameSplit[0].charAt(0):'?';
-        } else {
-            initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
-        }
-        if (w.devicePixelRatio) {
-            size = (size * w.devicePixelRatio);
-        }
-            
-        charIndex     = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
-        colourIndex   = charIndex % 20;
-        canvas        = d.createElement('canvas');
-        canvas.width  = size;
-        canvas.height = size;
-        context       = canvas.getContext("2d");
-         
-        context.fillStyle = color ? color : colours[colourIndex - 1];
-        context.fillRect (0, 0, canvas.width, canvas.height);
-        context.font = Math.round(canvas.width/2)+"px 'Microsoft Yahei'";
-        context.textAlign = "center";
-        context.fillStyle = "#FFF";
-        context.fillText(initials, size / 2, size / 1.5);
-        dataURI = canvas.toDataURL();
-        canvas  = null;
-        return dataURI;
+(function (w, d) {
+  function LetterAvatar(name, size, color) {
+    name = name || "";
+    size = size || 60;
+    var colours = [
+        "#1abc9c",
+        "#2ecc71",
+        "#3498db",
+        "#9b59b6",
+        "#34495e",
+        "#16a085",
+        "#27ae60",
+        "#2980b9",
+        "#8e44ad",
+        "#2c3e50",
+        "#f1c40f",
+        "#e67e22",
+        "#e74c3c",
+        "#00bcd4",
+        "#95a5a6",
+        "#f39c12",
+        "#d35400",
+        "#c0392b",
+        "#bdc3c7",
+        "#7f8c8d",
+      ],
+      nameSplit = String(name).split(" "),
+      initials,
+      charIndex,
+      colourIndex,
+      canvas,
+      context,
+      dataURI;
+    if (nameSplit.length == 1) {
+      initials = nameSplit[0] ? nameSplit[0].charAt(0) : "?";
+    } else {
+      initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
+    }
+    let initials1 = initials.toUpperCase();
+    if (w.devicePixelRatio) {
+      size = size * w.devicePixelRatio;
     }
-    LetterAvatar.transform = function() {
-        Array.prototype.forEach.call(d.querySelectorAll('img[avatar]'), function(img, name, color) {
-            name = img.getAttribute('avatar');
-            color = img.getAttribute('color');
-            img.src = LetterAvatar(name, img.getAttribute('width'), color);
-            img.removeAttribute('avatar');
-            img.setAttribute('alt', name);
-        });
-    };
-    // AMD support
-    if (typeof define === 'function' && define.amd) {
-        
-        define(function () { return LetterAvatar; });
-    
+
+    charIndex = (initials == "?" ? 72 : initials.charCodeAt(0)) - 64;
+    colourIndex = charIndex % 20;
+    canvas = d.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    context = canvas.getContext("2d");
+
+    context.fillStyle = color ? color : colours[colourIndex - 1];
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'";
+    context.textAlign = "center";
+    context.fillStyle = "#FFF";
+    context.fillText(initials1, size / 2, size / 1.5);
+    dataURI = canvas.toDataURL();
+    canvas = null;
+    return dataURI;
+  }
+  LetterAvatar.transform = function () {
+    Array.prototype.forEach.call(
+      d.querySelectorAll("img[avatar]"),
+      function (img, name, color) {
+        name = img.getAttribute("avatar");
+        color = img.getAttribute("color");
+        img.src = LetterAvatar(name, img.getAttribute("width"), color);
+        img.removeAttribute("avatar");
+        img.setAttribute("alt", name);
+      }
+    );
+  };
+  // AMD support
+  if (typeof define === "function" && define.amd) {
+    define(function () {
+      return LetterAvatar;
+    });
+
     // CommonJS and Node.js module support.
-    } else if (typeof exports !== 'undefined') {
-        
-        // Support Node.js specific `module.exports` (which can be a function)
-        if (typeof module != 'undefined' && module.exports) {
-            exports = module.exports = LetterAvatar;
-        }
-        // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
-        exports.LetterAvatar = LetterAvatar;
-    } else {
-        
-        window.LetterAvatar = LetterAvatar;
-        d.addEventListener('DOMContentLoaded', function(event) {
-            LetterAvatar.transform();
-        });
+  } else if (typeof exports !== "undefined") {
+    // Support Node.js specific `module.exports` (which can be a function)
+    if (typeof module != "undefined" && module.exports) {
+      exports = module.exports = LetterAvatar;
     }
-})(window, document);
\ No newline at end of file
+    // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
+    exports.LetterAvatar = LetterAvatar;
+  } else {
+    window.LetterAvatar = LetterAvatar;
+    d.addEventListener("DOMContentLoaded", function (event) {
+      LetterAvatar.transform();
+    });
+  }
+})(window, document);