Geek Answers Handbook

How to use the "logo" option in shields.io icons?

How to use logo parameter in shields.io icons ?

For example, something like

Raspberry pi

does not give the expected result.

+5
source share
2 answers

you need to create a base64 logo you can use http://b64.io/ to convert your png to base64 code the link should be grouped your image was too big for uri, you can scale it to 14px height.

Raspberry pi

+5
source

Here is a three-step guide to using the logo, for example. GitHub logo , in the shield / icon.

  • Encode image in Base64.

    From Wikipedia

    Base64 is a group of similar binary text encoding schemes that represent binary data in ASCII string format, translating it into a radix-64 representation. The term Base64 comes from a specific encoding of the transmission of MIME content.

    Upload an image and use one of many online tools, for example. http://b64.io/ to encode it.
    The result is a line starting with data: image / png; base64, and followed by a very long string of characters.

  • Encode Base64 string in percent encoding.

    From Wikipedia

    Percent encoding, also known as URL encoding, is a mechanism for encoding information in a Unified Resource Identifier (URI) under certain circumstances. Although it is known as URL encoding, it is essentially used more widely in the main set of Unified Resource Identifiers (URIs), which includes both a Unified Resource Identifier (URL) and a Unified Resource Name (URN).

    Take a very long Base64 string and use (again) one of many online tools, for example. http://meyerweb.com/eric/tools/dencoder/ to encode a string.
    Some characters will be replaced by % , followed by two hexadecimal digits. For example, / is replaced by %2F .

  • Finally, add the encoded string to your screen url after ?logo= . As an example: https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%%3D corresponds . You can try using this one.

TIP: Sometimes a coded string, starting from step 2 or 3, may be too long to use. Then you should try to reduce the size (total number of pixels) of the image and try again.

+11
source

More articles:


All Articles