How to add an logo in the header in PythonShiny?

[Secret-Ambush]

Hello!
I was trying to add a logo (image) to the header of my Shiny (Python) app. I found a lot of similar doubts on how to implement this in R shiny but not in Python. Additionally, I'm using Shiny Express.

This is a snippet of my code so far:

ui.page_opts(title="ETABS Workbook Visualisation", fillable=True, id="page")

with ui.sidebar():
  ui.input_file("file1", "Upload an ETABS workbook", multiple=False, accept=[".xlsx"])
  ui.input_radio_buttons(
  "section",
  "Section Choices",
  choices=["Beam", "Column", "Slab", "All Section"],
  selected=["Beam"],
)

with ui.nav_panel("Mass Per Section"):
  "some content here"
  
with ui.nav_panel("Something else"):
  "Something else"
  
with ui.nav_panel("Something else 2"):
  "Something else 2"
  

ui.nav_spacer()

with ui.nav_control():  
    ui.input_dark_mode()

Thanks a lot!

[keithn]

How about including an <img> tag instead of the normal title? You'll want a separate window title which is what appears at the top of the browser/tab.

This would be the new ui.page_opts using an example logo:

ui.page_opts(
    title=ui.img(src="https://raw.githubusercontent.com/rstudio/shiny/main/man/figures/logo.png", alt="shiny logo", height="50px"),
    window_title="ETABS app",
    fillable=True,
    id="page"
)

There's an example here: Shiny editor

[Secret-Ambush]

Thank you so much! This works perfectly.
Also, how do I change the website icon?

[Secret-Ambush]

Oh I think I can follow the same approach for website icon

Edit: Nevermind, it doesn't work the same for website icon

[keithn]

@Secret-Ambush

how do I change the website icon?

You need to include the logo in your app files or have it hosted online somewhere. Then change the src argument in img to point to the web address where that logo can be found. See these docs for an example of how a CSS file is sourced, but the same applies for an image: Shiny for Python - Customizing UI

This works perfectly.

If a post provides the solution, please remember to mark the post containing the expected answer as the solution

[Secret-Ambush]

Thanks a lot! Will go through them