Search code examples
javascriptdomhtmlfavicon

Dynamically generated Favicon Icon is very small in IE and edge.

I am trying to call API which return binary data (base64). When I upload an image,it get stored in the DB in binary format and page icon gets dynamically updated. In chrome and Firefox, page icon is visible and work as expected. However in Edge and IE, image looks too small and stretched. Someone have any idea what should I do?

  document.title = title;
            var src = "api/file/getPageLogo";
            src = src + '?=' + Math.random(); 
            var link = document.createElement('link'),
                oldLink = document.getElementById('dynamic-favicon');
            link.id = 'dynamic-favicon';
            link.rel = 'icon';
            link.href = src;
            if (oldLink) {
                document.head.removeChild(oldLink);
            }
            document.head.appendChild(link);

Does not work in IE

Works in Chrome

Solution

  • Actual problem was even if the image dimensions were 32*32, while converting it into base64 format, the code was converting dimensions to 200 * 60 which was required to achieve the other functionality. 

    var base64Data = FileTools.GetResizedImageBase64FromDataUri(image.FileData, 200, 60);

    simply by separating the logic's to achieve two different functionality and changing the dimension of one to 32*32 solved the issue.