Skip to content

Instantly share code, notes, and snippets.

@afig
Last active August 15, 2025 16:20
Show Gist options
  • Select an option

  • Save afig/be5ab20c50062dba7cb835e30206659a to your computer and use it in GitHub Desktop.

Select an option

Save afig/be5ab20c50062dba7cb835e30206659a to your computer and use it in GitHub Desktop.

Revisions

  1. afig revised this gist Jul 11, 2017. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions customBadges.md
    Original file line number Diff line number Diff line change
    @@ -10,9 +10,9 @@ The Shields service (at [shields.io](http://shields.io)) provides a way to creat

    Each badge has three main configuration options:

    - Subject - Text on the left side of the badge; this background color for this is gray (specifically, [\#555555](http://www.color-hex.com/color/555555))
    - Status - Text on the right side of the badge; usually the name of a service or a status code; the background color can be chosen
    - Color - The background color for the text on the right side of the badge; colors can be chosen by name, or by a given hex code (i.e. \#B7F5B2).
    - Subject - Text on the left side of the badge; the background color for this is normally gray (specifically, [\#555555](http://www.color-hex.com/color/555555))
    - Status - Text on the right side of the badge; usually the name of a service or a status code; the background color can be chosen by modifying the next option
    - Color - The background color for the text on the right side of the badge; colors can be chosen by name, or by a given hex code (i.e. \#B7F5B2)

    A badge can be created interactively by visiting the [shields.io](https://shields.io) website and scrolling to the bottom, where 3 fields (corresponding to the options above) allow you to make a badge. (Note, if you wish to use a hex color code with this generator, the '\#' symbol should be omitted.)

    @@ -34,7 +34,7 @@ Dashes, spaces, and underscores need to be escaped when manually creating a badg

    ### More options

    Beyond the three main configuration options, several other parameters exist. These are used by appending a question mark at the end of the URL, followed by the parameter, and an equals sign:
    Beyond the three main configuration options, several other parameters exist. These are used by appending a question mark at the end of the URL, followed by the parameter, an equals sign, and the value to assign:

    - style - How the badge looks, "flat" is the default, but "plastic", "flat-square", and "social" are also available.
    - label - Replaces the text on the left side of the badge (the subject option given above)
  2. afig revised this gist Jul 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion customBadges.md
    Original file line number Diff line number Diff line change
    @@ -47,4 +47,4 @@ Beyond the three main configuration options, several other parameters exist. The

    ## Closing notes

    The Shields service provides this service for free, but accepts donations. Visit the [shields.io](https://shields.io) for more information. This creator of this document has no association whatsoever with the Shields service, apart from using and benefitting from the service that Shields provides.
    The Shields service provides this service for free, but accepts donations. Visit the [shields.io](https://shields.io) for more information. This creator of this document has no association whatsoever with the Shields service, apart from using and benefitting from the service that Shields provides. No warranty of any kind is provided with respect to any part of this document.
  3. afig revised this gist Jul 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion customBadges.md
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ Dashes, spaces, and underscores need to be escaped when manually creating a badg
    | Space | `%20` or `_` or ` `* | ` ` |
    | Underscore | `__` | `_` |

    * _using a space alone will usually work, as browsers should convert it to `%20` automatically_
    \* _using a space alone will usually work, as browsers should convert it to `%20` automatically_

    ### More options

  4. afig revised this gist Jul 11, 2017. 1 changed file with 4 additions and 8 deletions.
    12 changes: 4 additions & 8 deletions customBadges.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Custom Badges

    The Shields (at [shields.io](http://shields.io)) service provides a way to create custom badges for your projects. These are badges are very common and are frequently used to show status information about the project, or demonstrate tools that were used for the development of your project.
    The Shields service (at [shields.io](http://shields.io)) provides a way to create custom badges for your projects. These are badges are very common and are frequently used to show status information about the project, or demonstrate tools that were used for the development of your project.

    ## Example badge:

    @@ -16,7 +16,7 @@ Each badge has three main configuration options:

    A badge can be created interactively by visiting the [shields.io](https://shields.io) website and scrolling to the bottom, where 3 fields (corresponding to the options above) allow you to make a badge. (Note, if you wish to use a hex color code with this generator, the '\#' symbol should be omitted.)

    Another way to create a badge is by modifying the URL that points to the badge. The badge in the example above has the following URL: `https://img.shields.io/badge/Powered%20by-PostgreSQL-blue.svg`. The magic is in the last part of the URL (after `/badge/`). In that part of the URL, you can see the three configuration options shown above. Each option is separated by a dash `'-'`. You will also notice that a space is represented by `%20` [_why_](https://www.w3schools.com/tags/ref_urlencode.asp). See below for escaping other characters.
    Another way to create a badge is by modifying the URL that points to the badge. The badge in the example above has the following URL: `https://img.shields.io/badge/Powered%20by-PostgreSQL-blue.svg`. The magic is in the last part of the URL (after `/badge/`). In that part of the URL, you can see the three configuration options shown above. Each option is separated by a dash `'-'`. You will also notice that a space is represented by `%20` ([_why_](https://www.w3schools.com/tags/ref_urlencode.asp)). See below for escaping other characters.

    Finally, you will notice that the image has a `.svg` extension. [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) is a [vector image](https://en.wikipedia.org/wiki/Vector_graphics) format that can be displayed by most modern browsers. Using a SVG file will greatly reduce the amount of information that needs to be transmitted (the above image is < 1 KB in size), and renders the image in full resolution (the text and shapes are actually drawn by the browser). However, older browsers (IE 8, for example) may not support this format. If necessary, the image's extension can be (manually) changed to `.png`, however, this increases the amount of data needed to be sent, along with causing an increased load on shield.io's servers. If you need to do this, it might be a good idea to host the image on your own server.

    @@ -30,7 +30,7 @@ Dashes, spaces, and underscores need to be escaped when manually creating a badg
    | Space | `%20` or `_` or ` `* | ` ` |
    | Underscore | `__` | `_` |

    *_using a space alone will usually work, as browsers should convert it to `%20` automatically_
    * _using a space alone will usually work, as browsers should convert it to `%20` automatically_

    ### More options

    @@ -45,10 +45,6 @@ Beyond the three main configuration options, several other parameters exist. The
    - colorB - Background of the right side of the badge
    - maxAge - Maximum amount of time the badge should be stored in the HTTP cache of a browser

    ## More examples

    //TODO

    ## Closing notes

    The Shields service provides this service for free, but accepts donations through Gratipay. Visit the [shields.io](https://shields.io) for more information. This creator of this document has no association whatsoever with the Shields service, apart from using and benefitting from the service that Shields provides.
    The Shields service provides this service for free, but accepts donations. Visit the [shields.io](https://shields.io) for more information. This creator of this document has no association whatsoever with the Shields service, apart from using and benefitting from the service that Shields provides.
  5. afig revised this gist Jul 11, 2017. 1 changed file with 51 additions and 2 deletions.
    53 changes: 51 additions & 2 deletions customBadges.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,54 @@
    # Custom Badges

    The shield.io service provides a way to create custom badges for your projects. These are badges are very common and are frequently used to show tools that were used for the development of your projects
    The Shields (at [shields.io](http://shields.io)) service provides a way to create custom badges for your projects. These are badges are very common and are frequently used to show status information about the project, or demonstrate tools that were used for the development of your project.

    To create a custom badge such as t
    ## Example badge:

    <a href="https://postgresql.org"><img src="https://img.shields.io/badge/Powered%20by-PostgreSQL-blue.svg"/></a>

    ## Creating a badge

    Each badge has three main configuration options:

    - Subject - Text on the left side of the badge; this background color for this is gray (specifically, [\#555555](http://www.color-hex.com/color/555555))
    - Status - Text on the right side of the badge; usually the name of a service or a status code; the background color can be chosen
    - Color - The background color for the text on the right side of the badge; colors can be chosen by name, or by a given hex code (i.e. \#B7F5B2).

    A badge can be created interactively by visiting the [shields.io](https://shields.io) website and scrolling to the bottom, where 3 fields (corresponding to the options above) allow you to make a badge. (Note, if you wish to use a hex color code with this generator, the '\#' symbol should be omitted.)

    Another way to create a badge is by modifying the URL that points to the badge. The badge in the example above has the following URL: `https://img.shields.io/badge/Powered%20by-PostgreSQL-blue.svg`. The magic is in the last part of the URL (after `/badge/`). In that part of the URL, you can see the three configuration options shown above. Each option is separated by a dash `'-'`. You will also notice that a space is represented by `%20` [_why_](https://www.w3schools.com/tags/ref_urlencode.asp). See below for escaping other characters.

    Finally, you will notice that the image has a `.svg` extension. [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) is a [vector image](https://en.wikipedia.org/wiki/Vector_graphics) format that can be displayed by most modern browsers. Using a SVG file will greatly reduce the amount of information that needs to be transmitted (the above image is < 1 KB in size), and renders the image in full resolution (the text and shapes are actually drawn by the browser). However, older browsers (IE 8, for example) may not support this format. If necessary, the image's extension can be (manually) changed to `.png`, however, this increases the amount of data needed to be sent, along with causing an increased load on shield.io's servers. If you need to do this, it might be a good idea to host the image on your own server.

    ### Escaping characters

    Dashes, spaces, and underscores need to be escaped when manually creating a badge:

    | | In URL | On Badge |
    |------------|----------------------|----------|
    | Dash | `--` | `-` |
    | Space | `%20` or `_` or ` `* | ` ` |
    | Underscore | `__` | `_` |

    *_using a space alone will usually work, as browsers should convert it to `%20` automatically_

    ### More options

    Beyond the three main configuration options, several other parameters exist. These are used by appending a question mark at the end of the URL, followed by the parameter, and an equals sign:

    - style - How the badge looks, "flat" is the default, but "plastic", "flat-square", and "social" are also available.
    - label - Replaces the text on the left side of the badge (the subject option given above)
    - logo - Add a logo to the badge
    - logoWidth - Gives a specific amount of space for the logo
    - link_&link_ - Add a link to the left and right side of a badge
    - colorA - Background of the left side of the badge
    - colorB - Background of the right side of the badge
    - maxAge - Maximum amount of time the badge should be stored in the HTTP cache of a browser

    ## More examples

    //TODO

    ## Closing notes

    The Shields service provides this service for free, but accepts donations through Gratipay. Visit the [shields.io](https://shields.io) for more information. This creator of this document has no association whatsoever with the Shields service, apart from using and benefitting from the service that Shields provides.
  6. afig created this gist Jul 11, 2017.
    5 changes: 5 additions & 0 deletions customBadges.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    # Custom Badges

    The shield.io service provides a way to create custom badges for your projects. These are badges are very common and are frequently used to show tools that were used for the development of your projects

    To create a custom badge such as t