How to replace the Azure logo with custom logo and set the size

[dushank]

I need to customize the Chat page with custom logos and custom text.

Adding a background image would be nice too.

How do I do it and what are the files I need to edit.

[yidino]

2 places:

• Go to \static directory - you may drop your logo icon and update index.html
• Also, go to \static\assets directory - you may update index-9b41b975.js (which is referred from index.html) ... in this .js
  first search "h1",{className:bi.headerTitle,children:"Azure AI"} and modify
  second, search "v2="/assets/Azure-30d5e7c0.svg" and replace with your own

For size or banner... you need to do to css file in \static\assets directory.

Hope it helps.

[imtiaz5021]

I tried both options. Also tried what is included in the README.md. None of them worked. I am unable to customize using our logo and text. When I check the files using FTP, I can see that files/code is up to date. I have synced the code. Not sure what am I missing?

[jefteete]

New Logo goes in frontend/src/assets. (where the other svg's are located). Update the frontend/src/pages/chat/Chat.tsx script and modify line 13 to import your logo - import Contoso from "../../assets/Contoso.svg";.

if you want to change size of logo, go to frontend/src/pages/chat/Chat.module.css and modify .chatIcon { height: 62px; width: 62px;}

if you want to change the favicon. ico - go to frontend/public and swap out the favicon.ico with your ico image.

***As noted in the READ.ME doc - be sure to build the app code with start.cmd or start.sh before you deploy, otherwise your changes will not be picked up. If you've updated any files in the frontend folder, make sure you see updates to the files in the static folder before you deploy. [this will update your static folder].