A few months ago when I started my journey into being a developer I used to see those little languages badges on people’s profiles on Github and think they were very cool. But even though I looked the code behind the profiles, the shields.io URLs and the shields.io page I was completely dumbfounded by how people did those.
One day I found a few of those on a friends profile and I thought that I finally would discover how to do them. I contacted her and she gave me the sad news that she also didn’t know how to do them and had just copied from someone else, as I had done myself.
Well, it took me a few weeks and some research, since I was trying to graduate from Ironhack’s Web Dev Bootcamp at the same time, but I finally was able to kind of “reverse engineer” their URLs. So today I bring you how you can make your own badges and make your profiles more interesting.
First things first
The first thing you need to do to make your own badges is to find if the logo image you need is available for shields.io. This is quite simple, the available images are: bitcoin, dependabot, discord, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis or any icons available on Simple Icons:
On the Simple Icons site you just have to search for the language, framework, library, or brand you want to see if it’s available.
1. The URL
If the icon you want is available, you are ready to start building your badge, this is the first part of the url that will precede all your badges:
Then, following the first part, you are going to add a dash and whatever you want to appear written on the badge the way you want it to be written (this part is case sensitive) so you can add a language, framework, library, brand, or whatever you may want to do a badge for. I’m going to do ReactJS for example:
https://img.shields.io/badge/-ReactJS
If you want to write more than one single word, you need to put %20 instead of a space:
https://img.shields.io/badge/-React%20Router
2. The Color
After the name, you’re going to need to add a color for the background of the badge. The shields.io url accepts named colors and also hex codes. Some of the named colors the url accepts are: brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey, grey/gray, success, important, critical, informational, inactive, blueviolet, black, and any other color accepted in CSS.
these are some examples of named colors
You can find some more named colors (and hex codes) here:
https://htmlcolorcodes.com/color-names/
To add the named colors or the hex codes to the link you just need, again, to add a dash (-) and the color:
https://img.shields.io/badge/-ReactJS-lightblue
https://img.shields.io/badge/-ReactJs-61DAFB
A little tip! When looking for the logos on Simple icons, the site already tells you what is the oficial color (and hex code) for that icon/brand:
3. The Logo
After knowing the logo exists on Simple Icons it can be simple or a bit more complicated to add it to the url. If the icon has a single name as in the case of react, git or javascript it’s quite simple, just add ?logo=name_of_the_icon:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react
For icons with more than one word, like React Router, you have to add a dash (-) between words:
https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router
Another tip! Some names might be more difficult, for example, NodeJs is written: node.js in the url. So some names you might need some experimenting. Feel free to contact me over on twitter @itsmetherogue if you have difficulties with this.
4. The Logo Color
You can also define a color for your logo, to do that just add &logoColor=color at the end of the url. This also accepts named colors as well as hex codes:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white
Like the badge, the logos also accept any of the named colors accepted in HTML/CSS.
5. Other Stylings
Other than colors, shields.io also allows for some more stylings of the badges:
The flat style
This is the default style for these badges, but if for any reason the default style change from browser to browser or changes in the future, to get this style you just need to add &style=flat at the end of the url:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat
The plastic button style
This transforms your badge into a 3d button like badge. To use it just add &style=plastic to the end of your url:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=plastic
Squared Bold Style
This makes your badge into a rectangular flat badge with the writings all caps and bold. To use it just add &style=for-the-badge to the end of your url:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=for-the-badge
Squared Style
This makes your badge into a rectangular flat badge. To use it just add &style=flat-square to the end of your url:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat-square
Badge Width
You can define a bigger width for your logo just by adding &logoWidth=amount_of_pixels to the end of your url:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&logoWidth=30
There are a few other stylings but they don’t apply for this kind of badge. You can check other stylings and other types of badges over on shields.io and I’ll be doing another article on interactive/real time badges soon!
There’s also a npm package that allows you to make badges easier. I haven’t tried it yet, but it’s called {badgr} and you can find a bit more about it here.
I hope you liked this little tutorial and make good use of it to add some interest to your profiles!
Top comments (1)
Thanks, this was really helpful. Gracias