Cómo agregar un favicon a tu sitio web en Framer: modo oscuro, Apple Touch Icon y solución de problemas

Para agregar un favicon en Framer: abre Site Settings (⌘ + ,), desplázate hasta "Site Images" → "Favicon", sube un archivo PNG de 64x64 píxeles y publica tu sitio. Eso es todo.

Ahora veamos los detalles y solucionemos cualquier problema que puedas encontrar.

Especificaciones de favicon para Framer

Framer requiere especificaciones específicas para el favicon:

• Tamaño: 64 x 64 píxeles
• Formato: PNG (recomendado)
• Fondo: Transparente

Paso 1: Abre Site Settings

Dos formas de acceder a la configuración:

• Teclado: Presiona ⌘ + , (Mac) o Ctrl + , (Windows)
• Menú: Haz clic en el ícono de Framer → Site Settings → Open Settings

Paso 2: Encuentra la sección de Favicon

• Desplázate hacia abajo hasta "Site Images"
• Busca el área de carga de "Favicon"

Paso 3: Sube tu favicon

Framer ofrece dos espacios de carga:

• Favicon para tema claro: Se muestra en navegadores en modo claro
• Favicon para tema oscuro: Se muestra en navegadores en modo oscuro

Sube la misma imagen en ambos espacios si solo tienes una versión.

Paso 4: Publica tu sitio

• Haz clic en el botón Publish
• El favicon solo aparece en el sitio publicado, no en la vista previa

Soporte para modo claro y oscuro

¿Por qué usar dos versiones?

• Los logos oscuros desaparecen en pestañas oscuras del navegador
• Los logos claros desaparecen en pestañas claras del navegador
• Versiones separadas garantizan visibilidad en todos los modos

Cómo crear las versiones

1. Comienza con tu favicon habitual
2. Invierte los colores para la versión alternativa
3. Mantén la misma forma y diseño
4. Usa fondos transparentes para ambas versiones

Configuración de Apple Touch Icon

Desde septiembre de 2024, Framer soporta Apple touch icons:

• Ubicación: La misma sección de Site Images
• Tamaño: 180 x 180 píxeles
• Propósito: Ícono de pantalla de inicio en dispositivos iOS

Solución de problemas: el favicon no se muestra

Verifica lo básico

• ¿Publicaste el sitio?
• Recarga forzada: Cmd+Shift+R o Ctrl+Shift+R
• Prueba en una ventana de incógnito

Verifica la ubicación de carga

• Debe estar en Site Settings, no en la configuración de la página
• El archivo debe ser un PNG válido

Solución de problemas: Google muestra el favicon antiguo

Google actualiza los favicons lentamente (días a semanas).

Pasos para acelerar el proceso

1. Asegúrate de que el favicon esté activo en tu sitio
2. Abre Google Search Console
3. Usa la herramienta de Inspección de URLs en la página principal
4. Solicita la indexación

Solución de problemas: problemas con Safari

Safari almacena los favicons en caché de manera agresiva.

Pasos para solucionarlo

1. Limpia la caché de Safari completamente
2. Elimina la caché de favicons: ~/Library/Safari/Favicon Cache/
3. Cierra y vuelve a abrir Safari

Solución de problemas: el logo de Framer sigue apareciendo

Causas comunes:

• El sitio no fue publicado después de subir el favicon
• Problema de caché del navegador
• Estás viendo la vista previa en lugar del sitio publicado

Solución: publica el sitio y limpia la caché del navegador.

Mejores prácticas

• Respalda tus archivos: Guarda los archivos originales del favicon
• Prueba en todos lados: Verifica en Mac, Windows, iOS y Android
• Usa verificadores: Favicon.im valida tu configuración
• Documenta los colores: Registra los códigos hexadecimales exactos para consistencia de marca

Preguntas frecuentes

¿Cómo agrego un favicon en Framer?

Abre Site Settings con ⌘ + ,, desplázate hasta "Site Images", haz clic en "Favicon", sube un archivo PNG de 64x64 píxeles y publica tu sitio.

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

Framer recomienda 64 x 64 píxeles en formato PNG con fondo transparente.

¿Por qué no se muestra mi favicon en Framer?

Las razones más comunes son: sitio no publicado, caché del navegador o ubicación de carga incorrecta. Publica tu sitio, haz una recarga forzada de la página o prueba en una ventana de incógnito.

¿Cuánto tarda Google en actualizar un favicon?

Google actualiza los favicons lentamente, generalmente de días a semanas. Solicita la reindexación a través de Google Search Console para acelerar el proceso.

¿Framer soporta favicons para modo oscuro?

Sí. Desde septiembre de 2024, Framer te permite subir favicons separados para temas claro y oscuro en la configuración de Site Images.

Referencias

1. How to set up a favicon in Framer - Ayuda oficial de Framer
2. September 2024 Update: Apple Touch Icon and Favicons - Actualizaciones de Framer
3. Why isn't Safari displaying the favicon? - Solución de problemas de Framer
4. Favicon.im - Herramienta de prueba y validación de favicons