Has creado un dashboard de Streamlit limpio, has compartido el enlace con tu equipo y alguien te pregunta: «¿Por qué la pestaña del navegador muestra el logotipo genérico de Streamlit en lugar del de tu marca?» La solución es un parámetro que seguramente te has saltado: page_icon. En este tutorial te explicamos paso a paso cómo definir un favicon de Streamlit con una imagen local, un emoji o una URL, y cómo comprobar que aparece realmente en la pestaña.
Qué controla realmente page_icon
Streamlit renderiza tu app dentro de una página que genera. La función st.set_page_config() acepta el argumento page_icon, que le indica a Streamlit qué icono debe utilizar en la pestaña del navegador y, en algunos navegadores, en los marcadores. No se trata de un stack completo de HTML favicon, sino del mecanismo propio de Streamlit para controlar el icono de la pestaña.
Según la especificación HTML, un favicon se declara mediante un enlace rel="icon" en el head del documento (especificación HTML de WHATWG). Cuando le pasas page_icon, Streamlit se encarga de ese enlace por ti. Si quieres saber más sobre qué es un favicon y dónde aparece, consulta nuestra guía sobre qué es un favicon.
Requisitos previos
- Una app de Streamlit que funcione (cualquier versión compatible con
st.set_page_config). - Un archivo de icono: un PNG, JPG o SVG cuadrado. Para obtener el mejor resultado, utiliza una imagen cuadrada de al menos 64×64 px.
- Lo básico sobre cómo ejecutar
streamlit run app.py.
Cómo definir tu favicon de Streamlit paso a paso
Paso 1 — Llama primero a set_page_config
st.set_page_config() debe ser el primer comando de Streamlit de tu script. Si llamas antes a st.title() o a cualquier otra función de Streamlit, Streamlit genera un error. Coloca la llamada al principio del archivo de tu app, justo después de los imports.
import streamlit as st
st.set_page_config(
page_title="My Dashboard",
page_icon="icon.png"
)
st.title("My Dashboard")
Paso 2 — Apunta page_icon a tu imagen
El valor de page_icon puede ser:
- Una ruta relativa a un archivo de imagen de tu proyecto, como
"icon.png". - Una ruta absoluta, como
"/home/user/app/icon.png". - Una URL a una imagen, como
"https://example.com/icon.png". - Un único carácter emoji, como
"🚀".
Para el icono de tu marca, un PNG o SVG local es la opción más fiable. Mantén el archivo en el mismo directorio que el script de tu app o utiliza una ruta relativa al directorio desde el que ejecutas streamlit run.
Paso 3 — Usa un emoji si todavía no tienes una imagen
Si estás haciendo un prototipo, un emoji es la opción más rápida. Streamlit lo convierte en un icono para la pestaña:
st.set_page_config(page_title="Prototype", page_icon="📊")
Te resulta útil para herramientas internas, pero no coincidirá con tu marca. Cuando estés listo para publicar, cámbialo por un archivo de imagen real.
Paso 4 — Prepara un archivo de icono adecuado
Streamlit acepta los formatos de imagen habituales, pero un PNG cuadrado con fondo transparente funciona mejor en distintos navegadores. Si solo tienes un logo, recórtalo para que aparezca únicamente el símbolo y redimensiona el resultado a 64×64 o 128×128 px. Nuestra guía para crear un favicon a partir de una imagen explica los pasos de recorte y simplificación.
Si necesitas un archivo ICO para otros usos, puedes convertir tu PNG con Mzu favicondl. Streamlit no requiere ICO por sí mismo, pero tenerlo ayuda si también sirves la app detrás de un dominio personalizado que utiliza un favicon tradicional.
Paso 5 — Verifica el icono de la pestaña
Ejecuta tu app, ábrela en un navegador y mira la pestaña. Si todavía ves el icono predeterminado de Streamlit, haz una recarga forzada (Ctrl+Shift+R o Cmd+Shift+R). Los navegadores guardan los favicon en caché de forma agresiva, por lo que el icono antiguo puede seguir apareciendo incluso después de cambiar el código. Para una lista de comprobación más detallada, consulta nuestra guía sobre el favicon que no aparece.
Problemas comunes
- Invocar
set_page_configdemasiado tarde. Debe ser la primera llamada de Streamlit. Si la mueves al principio, se corrige el error. - Ruta de archivo incorrecta. Una ruta relativa se resuelve desde el directorio desde el que inicias Streamlit, no desde la carpeta del script. Usa una ruta absoluta si no estás seguro.
- Imágenes no cuadradas. Un logo ancho se deforma o aparece con barras laterales. Recórtalo a un formato cuadrado antes.
- Caché del navegador. La pestaña puede mostrar el icono anterior durante un tiempo. Haz una recarga forzada o prueba en una ventana privada.
- Diferencias en las rutas de despliegue. En Streamlit Community Cloud o en un contenedor, el directorio de trabajo puede ser distinto al de tu entorno local. Usa una ruta relativa al archivo de la app o una ruta absoluta que exista en el entorno de despliegue.
Cuando necesitas más que page_icon
page_icon cubre la pestaña del navegador para la propia app de Streamlit. Si integras la app en un sitio más grande o necesitas Apple Touch icons y un web app manifest, son asuntos separados que gestiona el HTML que rodea la app. Para un conjunto completo de iconos, consulta nuestras prácticas recomendadas para favicons.
Configurar un favicon de Streamlit es un cambio de una línea una vez que sabes dónde colocarlo. Empieza con st.set_page_config(page_title=..., page_icon=...) en la parte superior del script, usa un PNG o SVG cuadrado y comprueba el resultado con una recarga forzada. Eso es suficiente para sustituir el logo predeterminado de Streamlit por tu marca en la pestaña.