Display GitHub contributors in README


contrib.rocks

contrib.rocks has an embed for displaying contributors.

The following embed is for html-react-parser:

html-react-parser contributors

The Markdown embed is:

[![Code Contributors](https://contrib.rocks/image?repo=remarkablemark/html-react-parser)](https://github.com/remarkablemark/html-react-parser/graphs/contributors)

Custom

You can embed a linked image as long as you have the urls to the contributor’s profile and avatar.

To get the avatar url:

  1. Go to the profile page
  2. Right-click the image
  3. Select Copy Image Address (or Open Link in New Tab)

See screenshot below:

Copy GitHub avatar image address

What’s copied should be similar to the url below:

https://avatars2.githubusercontent.com/u/10594555?s=460&v=4

The querystring ?s=460&v=4 can be described as follows:

  • s stands for the size (width and height in pixels)
  • v represents the version used by GitHub for cache busting

Alternatively, you can add .png to the profile url (which acts as a redirect to the avatar image):

https://github.com/remarkablemark.png?size=50

This means you can add the following HTML to your README.md:

<a href="https://github.com/remarkablemark">
  <img src="https://github.com/remarkablemark.png?size=50" />
</a>

Or include the Markdown below which does the same thing:

[![](https://github.com/remarkablemark.png?size=50)](https://github.com/remarkablemark)

Here’s the output:

remarkablemark



Please support this site and join our Discord!