Open Collective

Open Collective has an embed for displaying contributors, which is pretty cool.

The following embed is for html-react-parser:

The HTML of the embed is:

<a href="https://github.com/remarkablemark/html-react-parser/graphs/contributors">
  <img src="https://opencollective.com/html-react-parser/contributors.svg?width=890&button=false">
</a>

And the Markdown equivalent is:

[![](https://opencollective.com/html-react-parser/contributors.svg?width=890&button=false)](https://github.com/remarkablemark/html-react-parser/graphs/contributors)

But for projects not on Open Collective, how can I display my 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:

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: