How to remove the ".Streamlit" from the web page title?

Hello @BeyondMyself,

So here’s another very hacky solution. You just have to add and call the following function in your app.

def set_page_title(title):
    st.sidebar.markdown(unsafe_allow_html=True, body=f"""
        <iframe height=0 srcdoc="<script>
            const title = window.parent.document.querySelector('title') \
                
            const oldObserver = window.parent.titleObserver
            if (oldObserver) {{
                oldObserver.disconnect()
            }} \

            const newObserver = new MutationObserver(function(mutations) {{
                const target = mutations[0].target
                if (target.text !== '{title}') {{
                    target.text = '{title}'
                }}
            }}) \

            newObserver.observe(title, {{ childList: true }})
            window.parent.titleObserver = newObserver \

            title.text = '{title}'
        </script>" />
    """)


set_page_title("My new title")

This will however add a small padding where you’ll call the function.

:warning: Caution though, for security reasons, do not let the app user change that title with a text_input.

set_page_title("🎈 My title")  # OK
set_page_title(st.text_input("Edit my title"))  # Security risks
5 Likes