Shield Logo doesn't display correctly

Description:

The favicons in shields do not show.

Some useful info in https://github.com/RocketChat/Rocket.Chat/issues/14696#issuecomment-497403279

The SVG is including the favicon as an embedded SVG image.

For security reasons, browsers will disable SVG scripts, linking and other types of interactivity when they’re added to your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file. https://www.sitepoint.com/add-svg-to-web-page/

An example way to include it working would be to wrap it in an object tag:

<object type="image/svg+xml" data="https://open.rocket.chat/api/v1/shield.svg?type=channel&channel=general">
    <!-- Fall back to image tag if svg fails -->
    <img src="https://open.rocket.chat/api/v1/shield.svg?type=channel&channel=general" />
</object>

https://jsfiddle.net/9o0engwz/

Steps to reproduce:

1. Put a shield in an img tag on any website.

Expected behavior:

Actual behavior:

Server Setup Information:

• Version of Rocket.Chat Server: 0dec9891ee68741ad5fa2450ce2c015613376422

Suggested Fix:

I tried grabbing the SVG content of the favicon and included it as part of the shield SVG, however, that didn't work because of the positioning of the original svg / vs the shield... Maybe allow a rasterized SVG to PNG that gets cached? There may be a better solution.