Si tu sitio de Framer publicado muestra un globo genérico en la pestaña del navegador, revisa tres capas: el campo del favicon del proyecto, el dominio publicado y la respuesta HTML. El favicon nativo de Framer, definido a nivel de proyecto, se puede sustituir sin rediseñar las páginas.
Empieza por el cargador nativo de Framer. Mantiene el icono vinculado al proyecto y evita añadir un fragmento de HTML aparte. Utiliza código personalizado solo cuando necesites un SVG, un tamaño concreto o una URL de asset que quieras controlar.
Antes de empezar
- Acceso al proyecto de Framer y a su panel de Settings.
- Una imagen de origen cuadrada. Exporta un PNG de 512×512, además de ICO o SVG si hace falta, con Mzu favicondl.
- El dominio exacto que utilizan los visitantes, incluido cualquier dominio personalizado.
Si necesitas más orientaciones sobre la carga, consulta nuestra guía de favicon no-code. Aquí nos centramos en la configuración, la publicación y la verificación en Framer.
Cómo añadir un favicon en Framer
- Abre la configuración del proyecto.
Abre el proyecto en Framer, selecciona Settings en el menú superior del proyecto y abre la configuración del sitio. Busca el campo Favicon o Site Icon en los datos generales del sitio; si no aparece, revisa la sección SEO o de metadatos del mismo panel. No lo configures en una sola página.
- Sube un icono cuadrado.
Selecciona Upload, elige el PNG y revisa el recorte. Centra la marca y elimina el texto diminuto que desaparece al tamaño de una pestaña. Guarda el cambio. Si el campo acepta SVG o ICO, utiliza esa exportación; en caso contrario, usa el PNG.
- Publica el proyecto.
Selecciona Publish y abre la URL publicada en una pestaña nueva. El lienzo del editor no es lo que reciben los visitantes.
- Verifica la respuesta publicada.
En el panel Elements de DevTools, busca
rel='icon'. Comprueba que la URL apunte al asset que has subido. En el panel Network, solicítalo y revisa el estado; una solicitud fallida no puede actualizar el icono de la pestaña. - Utiliza código personalizado solo para una sustitución deliberada.
Si Custom Code está disponible en la configuración del proyecto, abre su sección Head y añade lo siguiente, sustituyendo ambas URL por URLs públicas de assets con HTTPS:
<link rel='icon' type='image/svg+xml' href='https://your-domain.com/favicon.svg'> <link rel='icon' type='image/png' sizes='512x512' href='https://your-domain.com/favicon-512.png'>El HTML Standard define los enlaces de iconos externos mediante
rel='icon'. Desactiva la carga nativa o cualquier fragmento de código anterior para que una sola fuente gestione el icono.
Problemas comunes
- Solo funciona en el editor. Vuelve a publicar y prueba el dominio en producción, no una URL de vista previa.
- Enlaces de icono duplicados. Elimina el código personalizado obsoleto cuando el uploader de Framer ya define el icono.
- El icono antiguo sigue apareciendo. Comprueba primero la respuesta del asset y luego sigue la lista de verificación para solucionar problemas con el favicon para realizar las comprobaciones específicas de la caché.
- El asset funciona, pero se ve mal. Vuelve a recortar el archivo de origen para que sea cuadrado y simplifica los detalles finos antes de convertirlo de nuevo.
Conclusión
La configuración más limpia tiene un único responsable: el ajuste del proyecto. Sube un PNG cuadrado, publica, inspecciona el HTML en producción y reserva el código personalizado para una sobrescritura deliberada. La próxima sustitución se mantiene predecible.