[Question]: Change logo, color and images

[rivindubandara]

What is your question?

I want to change the main logo, the color of the ui and also the chatgpt logo

More Details

What I have done to change the colors temporarily is override the root colors however, sometimes when i refresh it doesnt stick.

What is the main subject of your question?

No response

Screenshots

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[berry-13]

you can change logo of the endpoint by creating a custom endpoint. You can modify the logo by changing the logo.svg in client/public/assets. What you did with the css it's pretty good, it's more likely to be a cache issue, try disabling cache in the inspect network tab and also test the changes on a fresh browser

[berry-13]

@rivindubandara If you want to set a global "preset" for everyone, use a modelSpec., where you can image and custom instructions

[Varial17]

Hey, whenever I change the logo in client/public/assets, it never updates when deployed via docker. Does anyone know why?

[joseph-holland]

Are you rebuilding the image or just using the deploy-compose.yml? If deploy with docker compose you should look into the docker-override docs here https://www.librechat.ai/docs/configuration/docker_override

This will allow you to pass your own custom logos, etc. into the built image without having to rebuild it yourself.

version: '3.4'
 
services:
  api:
    volumes:
      - ./client/public/assets/logo.svg:/app/client/public/assets/logo.svg
      - etc....

[Varial17]

I have this and no version, I will try yours

services:
api:
volumes:
- ./client/public/assets:/app/client/public/assets
- type: bind
source: ./librechat.yaml
target: /app/librechat.yaml

[joseph-holland]

Here is my docker-compose.override.yml file contents:

version: '3.4'

services:
  api:
    volumes:
      - ./client/public/assets/favicon-16x16.png:/app/client/public/assets/favicon-16x16.png
      - ./client/public/assets/favicon-32x32.png:/app/client/public/assets/favicon-32x32.png
      - ./client/public/assets/favicon-16x16.png:/app/client/dist/assets/favicon-16x16.png
      - ./client/public/assets/favicon-32x32.png:/app/client/dist/assets/favicon-32x32.png
      - ./client/public/assets/logo.svg:/app/client/dist/assets/logo.svg
      - ./client/public/assets/custom_icon.png:/app/client/dist/assets/custom_icon.png
      - ./client/public/assets/apple-touch-icon-180x180.png:/app/client/public/assets/apple-touch-icon-180x180.png
      - ./client/public/assets/apple-touch-icon-180x180.png:/app/client/dist/assets/apple-touch-icon-180x180.png
      - ./client/public/assets/maskable-icon.png:/app/client/public/assets/maskable-icon.png
      - ./client/public/assets/maskable-icon.png:/app/client/dist/assets/maskable-icon.png
      - ./client/manifest.webmanifest:/app/client/dist/manifest.webmanifest
      - ./client/new_index.html:/app/client/dist/index.html

I can't remember which one worked to change the icon for the saved webapp thing, but I think it was something to do with the ./client/manifest.webmanifest or something
{"name":"CustomName Chat","short_name":"CustomName Chat","start_url":"/","display":"standalone","background_color":"#000000","lang":"en","scope":"/","theme_color":"#009688","icons":[{"src":"/assets/favicon-32x32.png","sizes":"32x32","type":"image/png"},{"src":"/assets/favicon-16x16.png","sizes":"16x16","type":"image/png"},{"src":"/assets/apple-touch-icon-180x180.png","sizes":"180x180","type":"image/png"},{"src":"/assets/maskable-icon.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]}

I hope this helps @InvaderJ, sorry for not getting back sooner.

[InvaderJ]

@joseph-holland No sorries allowed! This is hugely helpful, thank you so much. I managed to solve my PWA icon issue.

Of course the next hurdle, which is technically answered by your own manifest content, is the name of the PWA. I've changed it in vite.config.ts, no dice. I then made an override to try and force my own vote.config.ts in, no dice. And, I changed the title in index.html and have an override there as well.

My manifest.webmanifest always comes back with the original "LibreChat" name for the PWA.

Wondering if there was anything else you did to get the PWA title changed? I see you are forcing your own manifest.webmanifest. I'm still assuming Vite would generate properly against its own config file but that seems not to be the case. Hmm.

Thanks again!

[joseph-holland]

I think I also had to create a custom index.html too and override the default. AFAIK when I was looking at this the ts file wouldn't be processed properly because we're not building it, don't quote me on that 😁.

The answer is definitely in the list above. Also I started from the first line down, so the index.html was the last file I modified, so I'm 99% sure that was it. I think it was as simple at the title attribute.

[joseph-holland]

Make sure the modified manifest file is being put in the correct destination folder too. I think something like that tripped me up also.

[joseph-holland]

Make sure to clear cache too or something. I think when I was originally hitting this, even if I removed the PWA icon from the homescreen when i added it back it kept the old name. I think I had to go into the site in the browser and remove any files from that site to fix this. It's been about six months since I hit these issues, so I can't fully remember.

[mlin01]

I have the same issue to change the background color on the login page and I am new to react app.
Can someone give detail instructions? Thanks in advance!