St.set_page_config does not directly display the website title I set?

Why after I set the website title with st.set_page_config, every time I open the app, “Streamlit” is still displayed first, and then the title I set is displayed? How can I directly display the title of the website I set when I open the website?

Hi @Bruce_Yin,

Can you share a code snippet so we can try to reproduce the issue?

st.set_page_config(
    page_title="My First App",
    page_icon="xxx.png",
    }
)

I wrote it according to API reference.
My Streamlit version is 1.12.0

Hi @Bruce_Yin,

This is expected behavior. st.set_page_config is a Streamlit command that is executed when you run your app.

It takes a fraction of a second for your app to launch and execute st.set_page_config. In that fraction of a second, you will see “Streamlit” displayed in the browser tab, before the title defined in st.set_page_config takes effect.

If you would like the behavior to be different, one where “Streamlit” is not displayed right before your title is set, I’d encourage you to submit a feature request in the Streamlit repo.

Another (unofficial) option would be to manually modify your Streamlit installation. You’d need to find where Streamlit is installed on your machine, and edit the <title>Streamlit</title> in <path-to-streamlit-installation>/static/index.html.

For example, on my macOS installation, I open :

/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/streamlit/static/index.html

And manually edit the content within the <title> tags.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <link rel="shortcut icon" href="./favicon.png" />
    <title>Streamlit</title>
    <script src="./vendor/viz/viz-1.8.0.min.js" type="javascript/worker"></script>
    <script src="./vendor/bokeh/bokeh-2.4.3.min.js"></script>
    <script src="./vendor/bokeh/bokeh-widgets-2.4.3.min.js"></script>
    <script src="./vendor/bokeh/bokeh-tables-2.4.3.min.js"></script>
    <script src="./vendor/bokeh/bokeh-api-2.4.3.min.js"></script>
    <script src="./vendor/bokeh/bokeh-gl-2.4.3.min.js"></script>
    <script src="./vendor/bokeh/bokeh-mathjax-2.4.3.min.js"></script>
    <link href="./static/css/5.71be5c0a.chunk.css" rel="stylesheet">
    <link href="./static/css/main.b46f6fce.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>!function (e) { function t(t) { for (var n, c, d = t[0], o = t[1], u = t[2], i = 0, s = []; i < d.length; i++)c = d[i], Object.prototype.hasOwnProperty.call(f, c) && f[c] && s.push(f[c][0]), f[c] = 0; for (n in o) Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]); for (l && l(t); s.length;)s.shift()(); return a.push.apply(a, u || []), r() } function r() { for (var e, t = 0; t < a.length; t++) { for (var r = a[t], n = !0, c = 1; c < r.length; c++) { var o = r[c]; 0 !== f[o] && (n = !1) } n && (a.splice(t--, 1), e = d(d.s = r[0])) } return e } var n = {}, c = { 4: 0 }, f = { 4: 0 }, a = []; function d(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, d), r.l = !0, r.exports } d.e = function (e) { var t = []; c[e] ? t.push(c[e]) : 0 !== c[e] && { 6: 1 }[e] && t.push(c[e] = new Promise((function (t, r) { for (var n = "static/css/" + ({}[e] || e) + "." + { 0: "31d6cfe0", 1: "31d6cfe0", 2: "31d6cfe0", 6: "f5138d60", 7: "31d6cfe0", 8: "31d6cfe0", 9: "31d6cfe0", 10: "31d6cfe0", 11: "31d6cfe0", 12: "31d6cfe0", 13: "31d6cfe0", 14: "31d6cfe0", 15: "31d6cfe0", 16: "31d6cfe0", 17: "31d6cfe0", 18: "31d6cfe0", 19: "31d6cfe0", 20: "31d6cfe0", 21: "31d6cfe0", 22: "31d6cfe0", 23: "31d6cfe0", 24: "31d6cfe0", 25: "31d6cfe0", 26: "31d6cfe0", 27: "31d6cfe0", 28: "31d6cfe0", 29: "31d6cfe0", 30: "31d6cfe0", 31: "31d6cfe0", 32: "31d6cfe0", 33: "31d6cfe0", 34: "31d6cfe0", 35: "31d6cfe0", 36: "31d6cfe0", 37: "31d6cfe0", 38: "31d6cfe0", 39: "31d6cfe0", 40: "31d6cfe0", 41: "31d6cfe0", 42: "31d6cfe0", 43: "31d6cfe0", 44: "31d6cfe0", 45: "31d6cfe0", 46: "31d6cfe0", 47: "31d6cfe0" }[e] + ".chunk.css", f = d.p + n, a = document.getElementsByTagName("link"), o = 0; o < a.length; o++) { var u = (l = a[o]).getAttribute("data-href") || l.getAttribute("href"); if ("stylesheet" === l.rel && (u === n || u === f)) return t() } var i = document.getElementsByTagName("style"); for (o = 0; o < i.length; o++) { var l; if ((u = (l = i[o]).getAttribute("data-href")) === n || u === f) return t() } var s = document.createElement("link"); s.rel = "stylesheet", s.type = "text/css", s.onload = t, s.onerror = function (t) { var n = t && t.target && t.target.src || f, a = new Error("Loading CSS chunk " + e + " failed.\n(" + n + ")"); a.code = "CSS_CHUNK_LOAD_FAILED", a.request = n, delete c[e], s.parentNode.removeChild(s), r(a) }, s.href = f, document.getElementsByTagName("head")[0].appendChild(s) })).then((function () { c[e] = 0 }))); var r = f[e]; if (0 !== r) if (r) t.push(r[2]); else { var n = new Promise((function (t, n) { r = f[e] = [t, n] })); t.push(r[2] = n); var a, o = document.createElement("script"); o.charset = "utf-8", o.timeout = 120, d.nc && o.setAttribute("nonce", d.nc), o.src = function (e) { return d.p + "static/js/" + ({}[e] || e) + "." + { 0: "5b115df8", 1: "dee24eda", 2: "bb4dd7f1", 6: "7e8d2c5e", 7: "53a73de8", 8: "ae8e2f0f", 9: "41e8c9f2", 10: "06a027f8", 11: "86e8cffc", 12: "beee5d47", 13: "506be93e", 14: "f09f2648", 15: "9b9bd312", 16: "08b2e4d3", 17: "9d30345e", 18: "c2a2a2e4", 19: "a1605b86", 20: "3c65d2ac", 21: "9b03158a", 22: "482ccb21", 23: "58e0f1dd", 24: "cfbe0a76", 25: "00e66190", 26: "48f49d0f", 27: "321a16ef", 28: "4e95b9d1", 29: "3c915533", 30: "7ca22af7", 31: "fa1be581", 32: "96359585", 33: "7fa1dd10", 34: "612c943a", 35: "33680811", 36: "941777e7", 37: "f2d63605", 38: "ecaeecaf", 39: "be5f6011", 40: "b9b045fb", 41: "cb6bc069", 42: "ea3be446", 43: "e01f5112", 44: "67fabc8b", 45: "afe83744", 46: "a4105ae0", 47: "4d685957" }[e] + ".chunk.js" }(e); var u = new Error; a = function (t) { o.onerror = o.onload = null, clearTimeout(i); var r = f[e]; if (0 !== r) { if (r) { var n = t && ("load" === t.type ? "missing" : t.type), c = t && t.target && t.target.src; u.message = "Loading chunk " + e + " failed.\n(" + n + ": " + c + ")", u.name = "ChunkLoadError", u.type = n, u.request = c, r[1](u) } f[e] = void 0 } }; var i = setTimeout((function () { a({ type: "timeout", target: o }) }), 12e4); o.onerror = o.onload = a, document.head.appendChild(o) } return Promise.all(t) }, d.m = e, d.c = n, d.d = function (e, t, r) { d.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, d.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, d.t = function (e, t) { if (1 & t && (e = d(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (d.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var n in e) d.d(r, n, function (t) { return e[t] }.bind(null, n)); return r }, d.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; return d.d(t, "a", t), t }, d.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, d.p = "./", d.oe = function (e) { throw console.error(e), e }; var o = this["webpackJsonpstreamlit-browser"] = this["webpackJsonpstreamlit-browser"] || [], u = o.push.bind(o); o.push = t, o = o.slice(); for (var i = 0; i < o.length; i++)t(o[i]); var l = u; r() }([])</script>
    <script src="./static/js/5.3a0bc4b5.chunk.js"></script>
    <script src="./static/js/main.4b2acc1f.chunk.js"></script>
</body>

</html>
2 Likes

cool~thank you!