# Channel Avatar Generator

**URL:** https://forums.rocket.chat/t/channel-avatar-generator/5882
**Category:** Community Creations
**Created:** [February 18, 2020, 2:32am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882 "2020-02-18T02:32:27Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 18, 2020, 2:32am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/1 "2020-02-18T02:32:27Z")

</div>

Hello

I have created a simple html page with javascript that will generate CustomCSS to give you a custom Avatar on any rocket.chat channel.

I do not see a way to attach a file to share it, but I would love to share this creation with the rocket.chat community as it is quite handy and allows you to easily add a nice custom touch to your server.

Images are resized appropriately with all view modes too.

Is it against the rules to link to a download for this tool?

😁

 ![Capture](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/2/20c17ef38f5b3d1fa28596899d91d6641cd3898b.png)

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 18, 2020, 3:00am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/2 "2020-02-18T03:00:52Z")

</div>

![Capture-01](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/7/70f95cc65b16405f0a98dd8aeaffddc627473c62.png)

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 18, 2020, 3:01am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/3 "2020-02-18T03:01:52Z")

</div>

![Capture-03](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/9/9478b8f60b8c4de5e5e226cfff4c14956388f536.png)

---

<div class="post-metadata">

### Author: ![Menma](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@Menma](https://forums.rocket.chat/u/Menma)
#### Post date: [February 25, 2020, 7:32pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/4 "2020-02-25T19:32:20Z")

</div>

Could you provide a link or sample css? I’ve seen a few links to this post from various places so I’m sure users are interested.

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 25, 2020, 8:24pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/6 "2020-02-25T20:24:06Z")

</div>

> **[ChannelAvatarCSSGenerator.zip](https://drive.google.com/file/d/1fkzcSrotanUiZ29prusDQHI0yi-shurx/view?usp=sharing)**
>
> Google Drive file.

---

<div class="post-metadata">

### Author: ![Menma](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@Menma](https://forums.rocket.chat/u/Menma)
#### Post date: [February 26, 2020, 12:23pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/7 "2020-02-26T12:23:11Z")

</div>

Much appreciated. I’ll give this a test and report back =)

---

<div class="post-metadata">

### Author: ![alejandrod](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/alejandrod/32/1316_2.png) [@alejandrod](https://forums.rocket.chat/u/alejandrod)
#### Post date: [February 26, 2020, 3:50pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/8 "2020-02-26T15:50:30Z")

</div>

Thanks for the input … it’s very interesting … I’ll try it. regards

---

<div class="post-metadata">

### Author: ![sing.li](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/sing.li/32/6_2.png) [@sing.li](https://forums.rocket.chat/u/sing.li)
#### Post date: [February 26, 2020, 3:59pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/9 "2020-02-26T15:59:59Z")

</div>

Yes. We definitely lack a community CONTRIB or tools repository.

@Game_Over is the source of this hosted somewhere on Github with a read\_me.md ?

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 26, 2020, 5:03pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/10 "2020-02-26T17:03:18Z")

</div>

It’s just a single html file located in that zip file. All the js and css are included in the one file. You can view the source by opening it in a text editor.

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 26, 2020, 5:07pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/11 "2020-02-26T17:07:45Z")

</div>

Also it should be noted this is not a “proper fix” for avatars, and does not show avatars in the mobile applications.

It is a work around using CSS to hide the actual avatar and replace it’s appearance with another image. It’s basically a CSS “trick” to get the appearance we were looking for. After copy/pasting the CSS over and over again and fixing the text for each of the new channels, I felt it was easier to make something like this to generate the code. Seemed to work pretty well so I wanted to share it so anyone can use it if they like it.

---

<div class="post-metadata">

### Author: ![Menma](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@Menma](https://forums.rocket.chat/u/Menma)
#### Post date: [February 26, 2020, 5:43pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/12 "2020-02-26T17:43:58Z")

</div>

Works exactly as described. Thank you for putting this together.

---

<div class="post-metadata">

### Author: ![Game\_Over](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@Game\_Over](https://forums.rocket.chat/u/Game_Over)
#### Post date: [February 27, 2020, 12:34am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/13 "2020-02-27T00:34:22Z")

</div>

I’m glad you like it 🙂

---

<div class="post-metadata">

### Author: ![Hifihedgehog](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/hifihedgehog/32/1546_2.png) [@Hifihedgehog](https://forums.rocket.chat/u/Hifihedgehog)
#### Post date: [March 2, 2020, 8:46pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/14 "2020-03-02T20:46:03Z")

</div>

This should definitely be added to the features list. Well, this and channel groups like Discord has.

---

<div class="post-metadata">

### Author: ![tom-s](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@tom-s](https://forums.rocket.chat/u/tom-s)
#### Post date: [May 1, 2020, 9:30am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/15 "2020-05-01T09:30:07Z")

</div>

Trying this out (snap 3.1 installation) but whatever I enter in Admin =\> Layout =\> Custom CSS doesn’t show up anywhere in the site. Am I overlooking something?

Never mind, less-compiler error on old setting

---

<div class="post-metadata">

### Author: ![Sprazzle](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@Sprazzle](https://forums.rocket.chat/u/Sprazzle)
#### Post date: [May 13, 2020, 3:43pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/16 "2020-05-13T15:43:22Z")

</div>

This is super neat. We may end up using this in the future if they decide they are getting sick of the multiple colors of letters that ends up kind of making each channel look the same. 🙂 Thanks for this!

---

<div class="post-metadata">

### Author: ![Johnnydement](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/johnnydement/32/2378_2.png) [@Johnnydement](https://forums.rocket.chat/u/Johnnydement)
#### Post date: [May 25, 2020, 9:48pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/17 "2020-05-25T21:48:21Z")

</div>

The file is gone T\_T  
Can @Game_Over or anyone share again?

Thanks!

---

<div class="post-metadata">

### Author: ![elsa](https://avatars.discourse-cdn.com/v4/letter/e/838e76/32.png) [@elsa](https://forums.rocket.chat/u/elsa)
#### Post date: [June 5, 2020, 2:31pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/18 "2020-06-05T14:31:30Z")

</div>

up  
can anyone share again?  
Thanks! 😘

---

<div class="post-metadata">

### Author: ![petersimac](https://avatars.discourse-cdn.com/v4/letter/p/94ad74/32.png) [@petersimac](https://forums.rocket.chat/u/petersimac)
#### Post date: [July 12, 2020, 9:09pm UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/19 "2020-07-12T21:09:44Z")

</div>

Please, can anyone re-share?

---

<div class="post-metadata">

### Author: ![lev](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/lev/32/1979_2.png) [@lev](https://forums.rocket.chat/u/lev)
#### Post date: [July 24, 2020, 11:37am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/20 "2020-07-24T11:37:24Z")

</div>

Please upload file to GitHub 😉  
GoogleDrive link is inactive

---

<div class="post-metadata">

### Author: ![TWiTCH757](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/twitch757/32/1988_2.png) [@TWiTCH757](https://forums.rocket.chat/u/TWiTCH757)
#### Post date: [July 26, 2020, 12:17am UTC](https://forums.rocket.chat/t/channel-avatar-generator/5882/21 "2020-07-26T00:17:37Z")

</div>

Please kind sir, please share your magic. I’ve been trying to figure this out for a while. Seems like you might be able to use the same avatar api for your users as the channels as that is where it pull’s the default square letter icons from.

But alas, this has eluded me. I just want to bedazzle my chat server with fly icons.
