整洁な Streamlit dashboard を構築し、リンクをチームに共有したものの、ある人が「なぜブラウザタブには自社ブランドではなく、generic な Streamlit ロゴが表示されるのか」と質問したかもしれません。原因は、見落としていた可能性のある1つのパラメーター、page_icon です。このチュートリアルでは、ローカル画像、emoji、URL を使って Streamlit favicon を設定し、タブに実際に表示されるかを確認する手順を解説します。
page_icon が実際に制御するもの
Streamlit は、生成したページの中で app を描画します。st.set_page_config() 関数は、ブラウザタブで使用するアイコンと、一部のブラウザではブックマークで使用するアイコンを Streamlit に指定する page_icon 引数を受け取ります。これは HTML favicon の設定全体を制御する機能ではありません。Streamlit 自身が持つ、タブアイコン用のフックです。
HTML 仕様では、favicon は document の head にある rel="icon" link で宣言されます（WHATWG HTML spec）。page_icon を渡すと、その link の設定を Streamlit が自動的に処理します。favicon とは何か、どこに表示されるのかについて詳しく知りたい場合は、what a favicon is のガイドをご覧ください。
前提条件
- 動作する Streamlit app（
st.set_page_configをサポートする任意のバージョン）。 - アイコンファイル：正方形の PNG、JPG、または SVG。最適な結果を得るには、64×64 px 以上の正方形画像を使用してください。
streamlit run app.pyの実行方法に関する基本的な知識。
단계별로 Streamlit favicon を設定する
ステップ1 — まず set_page_config を呼び出す
st.set_page_config() は、スクリプト内で最初に実行する Streamlit コマンドでなければなりません。その前に st.title() などの別の Streamlit 関数を呼び出すと、Streamlit はエラーを発生させます。app ファイルの一番先頭、import の直後に配置してください。
import streamlit as st
st.set_page_config(
page_title="My Dashboard",
page_icon="icon.png"
)
st.title("My Dashboard")
ステップ2 — page_icon に画像を指定する
page_icon には次の値を指定できます：
- プロジェクト内の画像ファイルへの相対パス（例：
"icon.png"） - 絶対パス（例：
"/home/user/app/icon.png"） - 画像へのURL（例：
"https://example.com/icon.png"） - 1つのemoji文字（例：
"🚀"）
ブランドアイコンには、ローカルのPNGまたはSVGが最も信頼できる選択肢です。ファイルはアプリスクリプトと同じディレクトリに配置するか、streamlit runを実行する場所からの相対パスを指定してください。
ステップ3 — 画像がない場合はemojiを使う
プロトタイプを作っている段階なら、emojiが 가장 빠른選択肢です。Streamlitはそれをタブ用のアイコンに変換します：
st.set_page_config(page_title="Prototype", page_icon="📊")
社内ツールには便利ですが、ブランドには合いません。公開する準備ができたら、実際の画像ファイルに置き換えましょう。
ステップ4 — 適切なアイコンファイルを準備する
Streamlitは一般的な画像形式に対応していますが、ブラウザ間で最もよく表示されるのは、透明背景の正方形のPNGです。ロゴしかない場合は、マーク部分だけに切り出し、64×64または128×128 pxにリサイズしてください。画像からfaviconを作成する手順を解説したガイドで、切り出しと簡略化の両方の手順を確認できます。
他の用途でICOファイルが必要なら、PNGをMzu favicondlで変換できます。Streamlit自体はICOを必要としませんが、カスタムドメインでアプリを配信し、従来型のfaviconも使っている場合は、ICOを用意しておくと役立ちます。
ステップ5 — タブアイコンを確認する
アプリを実行してブラウザで開き、タブを確認してください。デフォルトのStreamlitアイコンがまだ表示される場合は、ハードリロード（Ctrl+Shift+RまたはCmd+Shift+R）を行ってください。ブラウザはfaviconを強い力でキャッシュするため、コードを変更した後も古いアイコンが残ることがあります。より詳細な確認リストについては、faviconが表示されない場合を参照してください。
よくある落とし穴
- set_page_config の呼び出しが遅すぎます。 これは Streamlit で最初に行う呼び出しでなければなりません。先頭に移動すれば、エラーは解消します。
- ファイルパスが正しくありません。 相対パスは、スクリプトのあるフォルダではなく、Streamlit を起動したディレクトリを基準に解決されます。迷った場合は絶対パスを使用してください。
- 正方形ではない画像を使っています。 横長のロゴは、歪んでつぶれるか、letterboxed 表示になります。先に正方形にクロップしてください。
- Browser cache が影響しています。 タブには古いアイコンがしばらく表示されることがあります。hard refresh するか、private window で確認してください。
- デプロイ環境でパスが異なります。 Streamlit Community Cloud や container では、working directory がローカル環境とは異なる場合があります。アプリファイルからの相対パス、またはデプロイ先で存在する絶対パスを使用してください。
page_icon だけで対応できない場合
page_icon は、ブラウザータブに表示される Streamlit アプリ自体のアイコンを設定します。アプリをより大きなサイトに埋め込む場合や、Apple Touch icons と web app manifest が必要な場合は、それぞれ別の課題であり、周囲の HTML 側で対応します。完全なアイコン構成については、favicon best practices を参照してください。
配置場所さえわかれば、Streamlit favicon の設定は1行の変更で済みます。まずスクリプトの先頭に st.set_page_config(page_title=..., page_icon=...) を配置し、正方形の PNG または SVG を使って、hard refresh で確認してください。以上で、タブに表示される標準の Streamlit ロゴを自分のブランドアイコンに置き換えられます。