Fav Icon & Title Customization

Using Streamlit
1

It would be nice to be able to change the FavIcon and Title for Streamlit apps

2

Hello @Bobby,

Well actually you can :slight_smile: see the set_page_config method.

    st.set_page_config(
        page_title="Hello world",
        page_icon="chart_with_upwards_trend",
        layout="wide",
    )

Cheers,
Fanilo

5 Likes
3

I’ve tried that, but it still shows Streamlit in the title. It also temporarily shows “Streamlit” before loading custom title.

The favicon you can only set predefined icons.

image

4

Yeah it’s a known issue, there are some workarounds in this issue, it does involve tampering with the Streamlit install:

It accepts Twemoji icons but it should also accept types supported by st.image.

EDIT: loading a favicon and displaying it works for me:

from PIL import Image
import streamlit as st

im = Image.open("favicon.ico")
st.set_page_config(
    page_title="Hello",
    page_icon=im,
    layout="wide",
)

Fanilo

4 Likes
5

I will give the FavIcon a try, I didn’t know you could use Image that would work for me.

6

Hi @andfanilo ,

Tried the Image workaround and it sort of works, but the background of the favicon in the browser tab is black instead of transparent. Do you know how to make it have no background (i.e., transparent)? Thanks!

7

Hello @marduk

Yeah I’m seeing the same behavior so I guess that’s a regression :confused: could you create a Github issue for this with a sample icon/png on GitHub - streamlit/streamlit: Streamlit — The fastest way to build data apps in Python ?
Maybe there’s an unfortunate conversion to jpeg that destroys the transparent background (streamlit/page_config.py at 54349972db99a725567f0454d336c948e5dc0b82 · streamlit/streamlit · GitHub)

Thanks a lot :balloon:
Fanilo

8

Alright, this is stupid and not a solution, but for a bandaid fix, I just made the transparent part of my picture the same color as my tab using photoshop. Works in a pinch :sweat_smile: would still like to see alpha

1 Like
9

I opened an issue about this on:

10

Please, do you know where I can find a list of page_icon to call in my code?

2 Likes
11

you can give it a path to a favicon.ico. What’s the purpose of using PIL (I’m not familiar with that package)