Favicon en Webflow: cómo añadir un favicon y un webclip

Añade un favicon y un webclip en Webflow: dónde está el ajuste Iconos, los tamaños que genera, cómo publicarlo y qué hacer si no se actualiza.

Preguntas frecuentes

¿Qué tamaño debe tener un favicon en Webflow?

El centro de ayuda de Webflow indica un favicon de 32x32 y un webclip de 256x256. En el flujo actual subes una sola imagen cuadrada y Webflow genera el resto de tamaños por ti, así que parte de un archivo cuadrado de al menos 256x256 píxeles que se siga leyendo bien al reducirlo.

¿Dónde subo un favicon en Webflow?

Abre Site settings (Ajustes del sitio), ve a General y busca la sección Icons (Iconos). Sube tu imagen cuadrada, elige qué iconos quieres actualizar, aplica el cambio y publica el sitio. Las guías antiguas lo llaman Project settings, pero es el mismo lugar.

¿Qué es un webclip en Webflow?

Un webclip es el icono más grande que se usa cuando alguien guarda tu sitio en la pantalla de inicio del móvil o en un acceso directo similar. Webflow indica 256x256 píxeles. Es independiente del icono pequeño que aparece en la pestaña del navegador.

¿Por qué no aparece mi favicon de Webflow después de subirlo?

La causa más habitual es que no se publicó el sitio después de subirlo, ya que los iconos solo cambian en el sitio publicado. La segunda es la caché del navegador. Publica y comprueba en una ventana privada o en otro navegador antes de dar por hecho que la subida falló.

¿Webflow admite favicons SVG o para modo oscuro?

Según las notas de actualización de Webflow, puedes subir PNG, JPG, GIF, ICO o SVG, y el artículo de ayuda menciona un icono opcional de pestaña para modo oscuro. Además, Webflow convierte los SVG a PNG para que funcionen en todos los navegadores, así que prueba el resultado en los navegadores que te importan.

¿Cuánto tarda Google en mostrar mi nuevo favicon de Webflow?

No hay un plazo fijo. Google decide cuándo volver a rastrear y actualizar el icono en los resultados de búsqueda, y según los reportes de la comunidad puede tardar días, semanas o más. Lo que sí controlas tú es que el icono esté activo en tu sitio publicado.

Respuesta corta: en Webflow, abre Site settings > General > Icons (Ajustes del sitio > General > Iconos), sube una imagen cuadrada, elige qué iconos actualizar (favicon claro, favicon opcional para modo oscuro y webclip), aplica el cambio y publica el sitio. Webflow indica un favicon de 32x32 y un webclip de 256x256, y genera el resto de tamaños a partir de tu imagen. Nada cambia en el sitio en vivo hasta que publicas. (Comprobado en noviembre de 2026 con el centro de ayuda y las notas de actualización de Webflow.)

Qué pide Webflow

Los tutoriales antiguos describen dos campos de subida distintos: uno para un favicon de 32x32 y otro para un webclip de 256x256. El artículo de ayuda actual de Webflow describe un flujo más sencillo: subes una sola imagen cuadrada y Webflow se encarga de los tamaños. Para qué sirve cada icono:

Icono	Tamaño que indica Webflow	Dónde se muestra
Favicon (claro)	32x32	Pestañas del navegador y marcadores
Favicon (modo oscuro, opcional)	32x32	Pestañas del navegador cuando está en modo oscuro
Webclip	256x256	Accesos directos en la pantalla de inicio y enlaces guardados similares
Extras generados automáticamente	Favicon de 48x48, iconos táctiles de 180x180 y 192x192	Los genera Webflow a partir de tu imagen

Formatos de subida aceptados según las notas de actualización de Webflow: PNG, JPG, GIF, ICO y SVG. Los SVG se convierten a PNG para garantizar la compatibilidad entre navegadores.

Para ver con más detalle los tamaños en distintas plataformas, consulta nuestra guía de tamaños de favicon.

Prepara primero tu imagen

Un favicon se muestra con unos 16 a 32 píxeles de ancho en una pestaña, así que la imagen de origen importa más que los ajustes.

Empieza con un cuadrado. Exporta un lienzo cuadrado de 256x256 o más, para que el webclip no se amplíe.
Simplifica. Usa un isotipo o una sola letra, no el logotipo completo con texto. Los detalles finos se vuelven borrosos al tamaño de una pestaña.
Cuida el fondo. Un PNG transparente se ve bien en pestañas claras y puede desaparecer en las oscuras. Si usas un favicon para modo oscuro, crea una versión con la marca en un tono claro.
Usa un nombre de archivo neutro. Los nombres de los archivos subidos pueden acabar en el HTML publicado, así que evita algo como "final_v3_REAL.png".

Cómo añadir un favicon y un webclip en Webflow

Abre tu proyecto en el Designer o en el panel de Webflow y ve a Site settings (Ajustes del sitio).
Selecciona la pestaña General y baja hasta Icons (Iconos).
Haz clic en Upload icon (Subir icono) y elige tu imagen cuadrada.
Elige qué iconos debe actualizar la imagen: el favicon, el favicon opcional para modo oscuro y el webclip.
Si quieres un icono distinto para modo oscuro, añádelo en su casilla. Este paso es opcional.
Haz clic en Apply (Aplicar). Los textos de la interfaz pueden cambiar un poco a medida que Webflow la actualiza, así que guíate por las etiquetas que veas.
Publica el sitio en tus dominios. Guardar no basta para que los iconos lleguen al sitio en vivo.
Abre el sitio en vivo en una ventana privada y revisa la pestaña.

Lista de comprobación para copiar

`` [ ] Imagen de origen cuadrada, de 256x256 o más [ ] La marca es lo bastante simple para leerse al tamaño de una pestaña [ ] Probada con un tema de navegador claro y uno oscuro [ ] Subida en Site settings > General > Icons [ ] Cambio aplicado [ ] Publicada en el dominio en vivo (no solo en el dominio de staging webflow.io) [ ] Revisada en una ventana privada [ ] Actualización forzada o caché borrada si el icono antiguo persiste ``

Solución de problemas

El favicon sigue mostrando el icono antiguo o el logotipo de Webflow

Sigue estos pasos en orden:

Vuelve a publicar. Los iconos solo se activan al publicar. Si publicas en varios dominios, incluye todos.
Prueba en una ventana privada. Los navegadores guardan los favicons en caché de forma agresiva, y una pestaña normal puede mostrar el antiguo durante mucho tiempo.
Fuerza la actualización de la página (recarga sin caché), o cierra y vuelve a abrir el navegador.
Abre el archivo directamente. Comprueba que la URL del icono que aparece en el código fuente de la página carga en su propia pestaña.

La subida se rechaza o la imagen se ve deformada

Algunos hilos de la comunidad reportan errores de tamaño con los flujos antiguos, que exigían dimensiones exactas. Si te pasa, usa una imagen cuadrada e inténtalo de nuevo; si el problema continúa, prueba con otro navegador o con una ventana privada. Este consejo proviene de reportes en foros, no de la documentación de Webflow, así que tómalo como una solución alternativa.

Los resultados de Google muestran un icono incorrecto

El icono que aparece en los resultados de búsqueda lo controla Google, no Webflow. Los hilos de la comunidad describen actualizaciones que tardan días, semanas o más. Confirma que el icono carga en tu sitio en vivo y espera. Ayuda mantener un icono cuadrado y estable en una URL constante.

El icono se ve borroso en las pestañas

Suele significar que la imagen de origen tiene demasiado detalle o era de baja resolución desde el principio. Redibuja una marca más simple en un tamaño mayor y vuelve a subirla.

¿Qué formato conviene subir?

Formato	Ideal para	Ten en cuenta
PNG	La mayoría de los sitios; fiable y admite transparencia	Necesita resolución suficiente para el webclip
SVG	Arte original limpio	Webflow lo convierte a PNG, así que revisa la vista previa del resultado
ICO	Flujos heredados	Suele ser innecesario cuando Webflow genera los tamaños por ti
JPG	Rara vez es buena opción	No admite transparencia; deja un recuadro de fondo

Si no estás seguro, un PNG cuadrado de 256x256 o más es la opción más segura.

Dónde encaja esto en la preparación del lanzamiento

El favicon es una parte pequeña de la lista de comprobación de un lanzamiento, junto con los títulos, las descripciones y las imágenes para redes sociales. Si estás comparando plataformas antes de decidirte, nuestras páginas de comparativa con Webflow y de alternativas a Webflow explican las ventajas y desventajas, y la guía general para cambiar un favicon te servirá si gestionas sitios en más de una plataforma.

Si prefieres partir de un diseño ya hecho, el plan gratuito de We.Inc te permite publicar hasta tres sitios a partir de plantillas listas para usar; el constructor con IA que crea un sitio a partir de una descripción empieza en el plan Starter, por $20 al mes. Puedes registrarte aquí.

Empieza gratis · Sin tarjeta de crédito

Umair Ali Sadaqat

Fundador de We.Inc

Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.

¿Listo para crear algo grande?

Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.