Search code examples
githubshields.io

How do I use the 'logo' option in shields.io badges?


How do I use the logo option in shields.io badges?

For example, something like this

[![Raspberry Pi](https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=http://vectorlogo4u.com/wp-content/uploads/2016/02/RASPBERRY-PI-LOGO-VECTOR.png)](https://www.raspberrypi.org)

renders as this

Raspberry Pi

which doesn't give the expected result.


Solution

  • you need to base64 the logo you can use http://b64.io/ to convert your png to base64 code the link need to be entity escaped your image was too large for the uri, you can scale it to 14px of height.

    Raspberry Pi