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

Question

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

which doesn't give the expected result.

According to the [Raspberry Pi Visual Guidelines](https://static.raspberrypi.org/files/Raspberry_Pi_Visual_Guidelines_2020.pdf), You can use the logo only if the `height` is at least 48px, maybe it is preferable to directly ask them — thibsc, Apr 06 '20 at 16:36

Claudio · Answer 1 · 2017-01-04T20:01:25.783

Here is a 3-step guide to use a logo, e.g. the GitHub logo, in a shield/badge.

Encode the image in Base64.

From Wikipedia

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

Download the image and use one of the many online tools, e.g. http://b64.io/, to encode it.
The results is a string starting with data:image/png;base64, and followed by a very long string of characters.
Encode the Base64 string in percent-encoding.

From Wikipedia

Percent-encoding, also known as URL encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) under certain circumstances. Although it is known as URL encoding it is, in fact, used more generally within the main Uniform Resource Identifier (URI) set, which includes both Uniform Resource Locator (URL) and Uniform Resource Name (URN).

Take the very long Base64 string and use (again) one of the many online tools, e.g. http://meyerweb.com/eric/tools/dencoder/, to encode the string.
Some characters will be replaced with % followed by two hexadecimal digits. For example, / is replaced with %2F.
Finally, append the encoded string to your shield URL after ?logo=. As an example: https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D corresponds to . You can try using this one.

TIP: sometimes the encoded string, of either step 2 or 3, may be too long to be used. You should then try to reduce the size (total pixels) of the image and try again.

I have decreased my Base64 uploaded image to 50px width and height to appear in Github readme — Dasser Basyouni, Jun 14 '19 at 15:56
base64 conversion not required, see my one line answer below.. — piouson, Jul 05 '22 at 08:21
@piouson, the conversion is not required if and only if your logo is (as reported in https://shields.io/) one of the named logos from (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or [simple-icons](https://simpleicons.org/). If you want a custom logo, then you need to go through the base64 conversion. — Claudio, Jul 25 '22 at 14:00

Guillaume Massé · Accepted Answer · 2016-08-29T19:05:34.357

15

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.

edited Aug 29 '16 at 19:05

answered Aug 29 '16 at 18:59

Guillaume Massé

8,004
8
44
57

score 11 · Answer 3 · answered Nov 22 '21 at 14:14

11

You can use logo names from Simple Icons without base64 conversion.

https://img.shields.io/static/v1?message=css3&logo=css3&labelColor=5c5c5c&color=1182c3&logoColor=white&label=%20&style=plastic

answered Nov 22 '21 at 14:14

piouson

3,328
3
29
29

score 4 · Answer 4 · answered May 02 '22 at 08:09

You can use something like this

![Raspberry Pi](https://img.shields.io/badge/raspberrypi-Code?style=for-the-badge&logo=raspberrypi&logoColor=black&color=F1C232

Raspberry Pi

be aware of the following parameters

logoColor controls the color of the logo.
color Controls the color of the backgound

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

4 Answers4